js实现表格可编辑

合集下载

js实现表格可编辑

js实现表格可编辑竭诚为您提供优质文档/双击可除js实现表格可编辑篇一：用js实现的表格"http://f152.0020xx-12-09点击标题可排序//添加行"functionaddRow(table,index){varlastRow=table.rows[table.rows.length-1];varnewRow=lastRow.clonenode(true);table.tbodies[0].appendchild(newRow);setRowcanedit(newRow);returnnewRow;}functiondelete_row(rname){//函数delete_row用于删除一行vari;i=window.event.srcelement.parentnode.parentnode.row index;if(confirm(确定删除第+i+行))tabproduct.deleteRow(i);}functionmove_up(rname){//上移一行vari;i=window.event.srcelement.parentnode.parentnode.rowindex;if(i>=2)change_row(i-1,i);elsealert(第一行不能上移！);}functionmove_down(rname){//下移一行vari;i=window.event.srcelement.parentnode.parentnode.row index;if(i change_row(i+1,i);elsealert(最后一行不能下移！);}functionchange_row(line1,line2){//执行交换tabproduct.rows[line1].swapnode(tabproduct.rows[lin e2]);}//转换器，将列的字段类型转换为可以排序的类型：string,int,floatfunctionconvert(sValue,sdatatype){ switch(sdataty pe){case"int":sdatatype);sdatatype);returnparseint(sValue);case"float":returnparseFloat (sValue);case"date":returnnewdate(date.parse(sValue ));default:re turnsValue.tostring();}}//排序函数产生器，icol表示列索引，sdatatype表示该列的数据类型functiongeneratecomparetRs(icol,sdatatype){returnfunctioncomparetRs(otR1,otR2){varvValue1=convert(otR1 .cells[ic ol].firstchild.nodeValue,varvValue2=convert(otR2.cells[icol].firstchild.nodeValue,if(vValue1vValue2){return1;}else{return0;}};}//排序方法functionsorttable(stableid,icol,sdatatype){varotable=document.getelementbyid(stableid);varotbody=otable.tbodies[0];篇二：14-jquery：实现可编辑的表格jqueryedit.html："http://的jquery示例：可以编辑的表格-->123123456456jqueryedit.js：//在页面装载时，让所有的td都拥有一个点击事件$(document).ready(function(){//找到所有的td节点vartds=$("td");//给所有的td节点增加点击事件tds.click(tdclick);});//td被点击的事件。

JavaScript的表绘制

JavaScript的表绘制在Web开发中，表格是一种常见的展示数据的方式。

JavaScript是一门在网页上实现交互效果的脚本语言，它提供了丰富的API来操作HTML元素，包括创建和操纵表格。

本文将介绍如何使用JavaScript来绘制表格，以及一些常见的应用场景。

一、创建简单的表格要创建一个简单的表格，我们可以使用JavaScript的createElement 方法来创建表格元素（table），以及行（tr）和单元格（td）元素。

以下是一个示例代码：```// 创建表格元素var table = document.createElement('table');// 创建表格行var row1 = document.createElement('tr');var row2 = document.createElement('tr');// 创建单元格var cell1 = document.createElement('td');var cell2 = document.createElement('td');var cell3 = document.createElement('td');var cell4 = document.createElement('td');// 设置单元格内容cell1.textContent = '姓名';cell2.textContent = '年龄';cell3.textContent = '性别';cell4.textContent = '城市';// 将单元格添加到行中row1.appendChild(cell1);row1.appendChild(cell2);row2.appendChild(cell3);row2.appendChild(cell4);// 将行添加到表格中table.appendChild(row1);table.appendChild(row2);// 将表格添加到文档中的某个元素document.getElementById('tableContainer').appendChild(table); ```上述代码首先使用createElement方法创建了一个table元素，然后依次创建了两行两列的表格。

JS操作EXCEL大全

JS操作EXCEL大全JavaScript 是一种非常流行的编程语言，广泛用于 Web 开发。

虽然JavaScript 不是用来处理 Excel 文件的首选语言，但我们仍然可以使用一些第三方库和 JavaScript 内置的功能来操作 Excel 文件。

在接下来的文章中，我们将介绍一些常见的技术和库，以便在 JavaScript 中操作Excel 文件。

1. 使用 JavaScript 原生 API 操作 Excel 文件：JavaScript 提供了一些用于处理文件的 API，可以使用这些 API 执行一些基本的 Excel 文件操作。

例如，可以使用 FileReader API 读取Excel 文件，然后使用 JavaScript 操作数据。

这种方式主要适用于读取较小的 Excel 文件。

2.使用第三方库：2.1. ExcelJS：ExcelJS 是一个流行的 JavaScript 库，用于在浏览器和 Node.js 中操作 Excel 文件。

它提供了许多用于读取、写入和修改Excel 文件的方法。

您可以使用 ExcelJS 创建、读取和修改 Excel 文件，并进行复杂的数据操作，例如合并单元格、设置单元格样式等。

2.2. xlsx-populate：xlsx-populate 是另一个用于操作 Excel 文件的库，它提供了丰富的 API，使开发人员能够在浏览器和 Node.js 中读取和写入 Excel 文件。

它支持各种 Excel 功能，如图表、公式、数据验证等。

2.3. Excel4Node：Excel4Node 是一个用于操作 Excel 文件的轻量级库。

它使用 Apache POI 库来处理 Excel 文件，并提供了一组简单而强大的 API。

你可以使用 Excel4Node 通过浏览器或 Node.js 读取、写入和修改 Excel 文件。

3. 数据导出为 Excel 格式：你可以使用 JavaScript 将数据导出为 Excel 格式。

exceljs.js的应用实例

在本文中，我将为您介绍ExcelJS.js的应用实例。

ExcelJS.js是一个强大的JavaScript库，用于创建、读取和编辑Excel文件。

它提供了丰富的功能和灵活的API，可以满足各种复杂的Excel操作需求。

通过本文，您将了解ExcelJS.js的基本用法和一些实际的应用案例，希望对您有所帮助。

1. ExcelJS.js简介ExcelJS.js是一个基于JavaScript的Excel处理库，它可以在浏览器和Node.js环境下使用。

通过ExcelJS.js，您可以轻松地创建、读取和修改Excel文件，包括表格、图表、公式、样式等内容。

它支持多种Excel格式，包括xlsx、xls、csv等，同时提供了丰富的API和文档，方便开发者进行定制化的操作。

2. ExcelJS.js的基本用法要使用ExcelJS.js，首先需要安装它的npm包，并在项目中引入相关组件。

您可以使用ExcelJS的API来创建Workbook、Worksheet、Row和Cell等对象，通过这些对象可以进行Excel文件的各种操作。

您可以添加数据到单元格、设置单元格的样式、创建图表等。

ExcelJS.js还支持读取已有的Excel文件，并对其进行修改和保存。

3. 实际应用案例下面，我将介绍一些实际的应用案例，以展示ExcelJS.js的强大功能和灵活性。

案例一：数据导出假设您正在开发一个带有报表导出功能的Web应用，用户可以在页面上选择特定的数据，并导出为Excel文件。

通过ExcelJS.js，您可以将用户选择的数据按照特定的格式导出为Excel文件，并提供下载信息。

这样，用户可以方便地将数据保存为Excel，方便后续分析和处理。

案例二：数据处理假设您需要对大量的数据进行分析和处理，在Excel中手工操作可能会非常耗时。

通过ExcelJS.js，您可以编写脚本来自动化这些操作，比如对数据进行排序、筛选、计算等。

JS实现动态表格的添加，修改，删除功能（推荐）

JS实现动态表格的添加，修改，删除功能（推荐）1. ⾸先在页⾯中配置好⼀个表格框架<tr><td>新增参数:</td><td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td><td>参数列表:</td><td class="pn-fcontent"><input type="hidden" id="paramslist" name="paramslist" style="width:190%" height="500"/></td></tr><tr><table id="tab" width="100%" cellspacing="1" cellpadding="0" border="0" style="" class="pn-ltable"><tr><td height="20" valign="top" align="center">参数名称:</td><td height="20" valign="top" align="center">参数编码:</td><td height="20" valign="top" align="center">参数值:</td><td id="pos_1" height="20">操作</td></tr><tbody id="sortList"></tbody></table></tr><tr><td align="center" colspan="4"><input type="submit" class="btn" value="保存" onclick="setParamslist();"/><input type="button" class="btn" value="返回"/></td></tr>2. 相关JS函数function setParamslist() {var tab = document.getElementById("tab");//表格⾏数var rows = tab.rows.length ;//表格列数var cells = tab.rows.item(0).cells.length ;//alert("⾏数"+rows+"列数"+cells);var rowData = "";for(var i=1;i<rows;i++) {var cellsData = new Array();for(var j=0;j<cells-1;j++) {cellsData.push(tab.rows[i].cells[j].innerText);}rowData = rowData + "|" + cellsData;}document.getElementById("paramslist").value = rowData;}//打开相关新增应⽤参数界⾯function openAppParamsPage() {var param = new Object();//这个参数⼀定要传。

exceljs用法

exceljs用法
ExcelJS是一个用于创建和编辑电子表格的JavaScript库。

它提供了各种功能，包括读取、写入和修改电子表格文件，添加样式和格式，支持各种文件格式，如.xlsx、.csv、.ods等。

使用ExcelJS，我们可以轻松地创建、编辑和操作电子表格，从而实现各种业务用例，如数据分析、报告生成、表格导出等。

主要的使用步骤包括：
1. 引入ExcelJS库：通过npm安装或从官网下载ExcelJS库，并在项目中引入。

2. 创建一个工作簿对象：使用ExcelJS库提供的Workbook类，创建一个新的工作簿对象。

3. 添加工作表：使用工作簿对象提供的addWorksheet方法，添加一个或多个工作表。

4. 写入数据：使用工作表对象提供的各种方法，写入数据到表格中，可以是单元格、行或列。

5. 格式化和样式：使用工作表对象提供的各种方法，设置单元格、行或列的样式和格式。

6. 保存文件：使用工作簿对象提供的writeFile方法，将工作簿保存为指定格式的电子表格文件。

除此之外，ExcelJS还提供了各种高级功能，如公式计算、图表创建、数据筛选等，可以根据具体的需求进行使用。

总之，ExcelJS是一个功能强大、易于使用的JavaScript库，
可以大大简化电子表格的创建和操作过程，提高业务处理的效率和质量。

Extjs教程第六章 Editor Grids(可编辑表格)

Editor Grids（可编辑表格）在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。

但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。

幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。

它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。

在这章里，我们将会学到：∙为用户提供连接到data store的可编辑表格；∙把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据；∙通过编码操控grid并对事件做出相应；∙教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。

但是，首先，我们要看看可以用可编辑表格能够做什么事情。

我们能用可编辑表格做什么？EditorGridPanel和我们之前使用到的表单（form）很相似。

实际上，editor gird使用了和form中完全一样的表单字段。

通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。

包括输入约束以及数值验证等。

把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。

这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。

使用可编辑的表格：可编辑和不可编辑表格的区别十一个相当简单的开始的过程。

复杂的使我们需要处理编辑状态然后传回服务器。

但是一旦你学会了如何去做，这部分也就同样变得相当的简单。

让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。

修改后的代码如下所示：var title_edit = new Ext.form.TextField();var director_edit = new Ext.form.TextField({vtype: 'name'});var tagline_edit = new Ext.form.TextField({maxLength: 45});var grid = new Ext.grid.EditorGridPanel({renderTo: document.body,frame:true,title: 'Movie Database',height:200,width:520,clickstoEdit: 1,store: store,columns: [{header: "Title", dataIndex: 'title',editor: title_edit},{header: "Director", dataIndex: 'director',editor: director_edit},{header: "Released", dataIndex: 'released',renderer:Ext.util.Format.dateRenderer('m/d/Y')},{header: "Genre", dataIndex: 'genre',renderer: genre_name},{header: "Tagline", dataIndex: 'tagline',editor: tagline_edit}]});为了让grid可编辑，我们需要做四件事情。

ExtJS2.0实用简明教程之可编辑表格EditorGridPanel

如有你有帮助，请购买下载，谢谢！《ExtJS2.0 实用简明教程》之可编辑表格 EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由类，xtype 为 editorgrid。

使用 EditorGridPanel 与使用普通的 GridPanel 方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可，下面来看一个简单的示例。

Ext.onReady(function(){ var data=[{id:1, name:'小王', email:'', sex:'男', bornDate:'1991-4-4'}, {id:1, name:'小李', email:'', sex:'男', bornDate:'1992-5-6'}, {id:1, name:'小兰', email:'', sex:'女', bornDate:'1993-3-7'} ]; var store=new data:data, fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] }); var colM=new header:"姓名", dataIndex:"name", sortable:true, editor:new , {header:"性别", dataIndex:"sex" }, {header:"出生日期", dataIndex:"bornDate", width:120, renderer:, {header:"电子邮件", dataIndex:"email", sortable:true, editor:new ]);1页如有你有帮助，请购买下载，谢谢！var grid = new renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpandColumn:3 }); });上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个 JsonStore，在创建这个 store 的时候，指定 bornDate 列的类型为日期 date 类型，并使用 dateFormat 来指定日期信息的格式为"Y-n-j"， Y 代表年，n 代表月,j 代表日期。

javascript表格操作要点

一、简介Javascript是一种用于网页开发的脚本语言，它具有强大的表格操作功能，可以实现前端页面中表格数据的添加、删除、修改和查询等操作。

本文将介绍Javascript表格操作的要点，以及如何利用Javascript实现表格操作功能。

二、表格基本操作1. 创建表格使用Javascript可以动态创建表格，通过document.createElement()函数创建表格元素，并添加到页面中。

代码示例：```javascriptvar table = document.createElement("table");document.body.appendChild(table);```2. 添加表格行和单元格使用Javascript可以动态添加表格行和单元格，通过嵌套循环创建表格行和单元格，并将其添加到表格中。

代码示例：```javascriptvar table = document.createElement("table");for (var i = 0; i < 5; i++) {var row = table.insertRow(i);for (var j = 0; j < 3; j++) {var cell = row.insertCell(j);cell.innerHTML = "单元格";}}document.body.appendChild(table);```3. 删除表格行和单元格使用Javascript可以动态删除表格行和单元格，通过Table元素的deleteRow()和deleteCell()方法删除行和单元格。

代码示例：```javascriptvar table = document.getElementById("myTable");table.deleteRow(0); // 删除第一行table.rows[0].deleteCell(0); // 删除第一行的第一个单元格```4. 修改表格内容使用Javascript可以动态修改表格的内容，通过Table元素的rows 和cells属性获取表格的行和单元格，进而修改其内容。

jsp实现可编辑表格

jsp实现可编辑表格篇一：jsp+js实现可排序表格首先，定义一个js：tableSort.js:function sort(tableId, sortColumn,nodeT ype) {var table = document.getElementById(theT able);var tableBody = table.tBodies[0];var tableRows = tableBody.rows;var rowArray = new Array();for (var i = 0; i < tableRows.length; i++) {rowArray[i] = tableRows[i];}if (table.sortColumn == sortColumn) {rowArray.reverse();} else {rowArray.sort(generateCompareTR(sortColumn, nodeType));}var tbodyFragment = document.createDocumentFragment();for (var i = 0; i < rowArray.length; i++) {tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn = sortColumn;}function generateCompareTR(sortColumn, nodeType) { return function compareTR(trLeft, trRight) {var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType);if (leftValue < rightValue) {return -1;} else {if (leftValue rightValue) {return 1;} else {return 0;}}};}function convert(value, dataType) {switch (dataType) {case int:return parseInt(value);case float:return parseFloat(value);case date:return new Date(Date.parse(value));default:return value.toString();}}然后是使用：<%@ page language=java import=java.util.* pageEncoding=UTF-8%<%String path = request.getContextPath();String basePath = request.getScheme() + ://+ request.getServerName() + : + request.getServerPort() + path + /;%<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN<html<head<base href=<%=basePath%<titleMy JSP 'tabel.jsp' starting page</title<meta http-equiv=pragma content=no-cache<meta http-equiv=cache-control content=no-cache<meta http-equiv=expires content=0<meta http-equiv=keywords content=keyword1,keyword2,keyword3 <meta http-equiv=description content=This is my page<!--<link rel=stylesheet type=text/css href=styles.css--<script type=text/javascript src=userjs/tableSort.js</script </head<body<table id=theT able align=center border=1<tr<td标题1</td<td onclick=sort(theT able,1,'int')标题2</td<td onclick=sort(theT able,2,'int')标题3</td<td onclick=sort(theT able,3,'int')标题4</td(转载于: 小龙文档网:jsp实现可编辑表格) <td onclick=sort(theT able,4,'int')标题5 </td<td onclick=sort(theT able,5,'int')标题6</td<td onclick=sort(theT able,6,'int')标题7</td</tr</thead<tbody<tr<td</td <td2</td <td3</td <td4</td <td5</td <td6</td <td7</td </tr <tr <td2</td <td3</td篇二：JQuery可编辑表格小结JQuery可编辑表格小结2010/11/23页面说明：JQuery源代码：jquery.js；CSS样式：style.css；可编辑表格的JS：table.js；jsp页面:index.jsp Jsp页面代码如下：<%@ page language=java import=java.util.* pageEncoding=utf-8% <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN <html<head<titleJQuery + Demo</title<link rel=stylesheet type=text/css href=style.css /<script type=text/javascript src=jquery.js</script<script type=text/javascript src=table.js</script</head<body<br/<br/<table<thead <tr <th colspan=2可编辑表格</th </tr </thead <tbody<tr<th编号</th <th 姓名</th </tr <tr <td00001</td <td张山</td </tr <tr<td00002</td <td李四</td </tr <tr<td00003</td <td王五</td </tr <tr<td赵六</td </tr </tbody</table</body</htmlCSS样式源代码：TABLE {}TABLE TD {}TABLE TH{}TBODY TH{}可编辑表格JS源代码：/***首先通过js来解决内容部分奇偶行的背景色不同*页面启动时加载：* $(document).ready(function(){});*///简便写法$(function(){//找到表格内容区域的所有奇数行//使用even是为了通过tbody tr 返回所有的tr元素，//在数组下标是偶数的元素返回，因为这些元素，//实际上才是我们期望的tbody里面的奇数行$('tbody tr:even').css('background-color','#ECE9D8'); //首先找到所有的编号单元格//$('tbodytd:even').css('background-color','red'); var aryTd = $('tbody td:even'); //给这些单元格注册鼠标点击事件background-color: blue; border: 1px solid black; width: 50% border: 1px solid black; cursor: hand; width: 50% border: 1px solid black; /**修正边框不能合并*/ border-collapse: collapse; width: 400px;function() {/*一般写法//找到当前鼠标点击的Td,this，就是对应相应click的td var tdObj = $(this); //创建一个文本框（创建一个节点）var inputObj = $('<input type=text /'); //去掉文本框的边框inputObj.css('border-width', '0'); //设置文本框中文字的大小inputObj.css('font-size','15px'); //是文本框的宽度和td的宽度相同inputObj.width(tdObj.width()); //设置文本框的背景色inputObj.css('background-color',tdObj.css('background-color')); //插入之前需要将当前td中的内容放置到文本框inputObj.val(tdObj.html()); //清空td中的内容tdObj.html(''); //插入一个文本框到td中inputObj.appendT o(tdObj); */ /*精简写法*/ //找到当前鼠标点击的Td,this，就是对应相应click的td var tdObj = $(this); /**虽然点击input不会错，但单击td还是会出差bug * 解决方法：判断td中是否有input*/ if(tdObj.children('input').length 0) { } //td中的文本内容：var text = tdObj.html(); //清空td中的内容tdObj.html(''); /** * 1、创建一个文本框（创建一个节点）* 2、去掉文本框的边框* 3、设置文本框中文字的大小* 4、文本框的宽度和td的宽度相同* 5、设置文本框的背景色* 6、插入之前需要将当前td中的内容放置到文本框* 7、插入一个文本框到td中return false;var inputObj = $('<input type=text /') .css('border-width', '0') .css('font-size',tdObj.css('font-size')) .width(tdObj.width()) .css('background-c olor',tdObj.css('background-color')) .val(text) .append T o(tdObj); //使文本框选中get(0)实际的DOM 元素,但此时在苹果浏览器中不能选中//inputObj.get(0).select(); /**原因：先获得焦点，后选中* 解决方法：用JQuery的返回值:事件处理*/ inputObj.trigger('focus').trigger('select&#3 9;); //再次点击文本框，会有bug，是因为文本框属于TD,因此屏蔽文本框的click事件inputObj.click(); //处理文本框上回车和esc按键的操作inputObj.keyup( ); //处理文本框失去焦点inputObj.blur( function(event) { } //获得键值var keyCode = event.which; //处理回车if(13 == keyCode) { } //处理esc的情况if(27 == keyCode) {} //将td中的内容还原tdObj.html(text); //获取当前文本框中的内容var inputT ext = $(this).val(); tdObj.html(inputT ext); function() {} //返回false,停止传播return false;); } ); function() { } //获取当前文本框中的内容var inputT ext = $(this).val(); tdObj.html(inputT ext); //清除td下的文本框tdObj.remove('input');});小结：1．table中可以包含thead和tbody2．表头的内容放置在th中3．table{}这种写法称为标签选择器，可以对整个页面所有table产生影响。

js表格编辑状态模板写法

js表格编辑状态模板写法JS表格编辑状态模板写法1. 介绍在前端开发中，经常会遇到需要给用户提供表格编辑的功能。

为了提高用户体验，可以使用JavaScript来实现表格编辑状态的模板写法。

这样可以方便地管理和控制表格的编辑状态，使用户能够轻松地编辑和保存表格数据。

2. 准备工作在使用JS表格编辑状态模板之前，我们需要做一些准备工作。

首先，确保你的项目中引入了jQuery库，因为我们将使用它来简化操作。

其次，准备一个基本的HTML表格模板，包含一些待编辑的数据。

3. 编辑状态模板的HTML结构下面是一个基本的表格编辑状态模板的HTML结构：<table><thead><tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td contenteditable="true">张三</td><td contenteditable="true">18</td><td><button class="save-button">保存</button><button class="edit-button">编辑</button></td></tr></tbody></table>4. 添加编辑状态切换逻辑接下来，我们需要添加编辑状态的切换逻辑。

JS实现动态修改table及合并单元格的方法示例

JS实现动态修改table及合并单元格的方法示例JS动态修改表格的方式有很多种，以下是其中几种常用的方法示例：1. 使用innerHTML属性动态修改表格内容：```//获取表格元素var table = document.getElementById("myTable");//修改表格内容table.innerHTML ="<tr><td>1</td><td>John</td><td>Doe</td></tr><tr><td>2</td><td>J ane</td><td>Smith</td></tr>";```上述代码会将表格中的内容替换为指定的HTML字符串，以实现动态修改表格内容的效果。

2.使用DOM操作动态修改表格：```//获取表格元素var table = document.getElementById("myTable");//创建新的表格行和单元格var newRow = table.insertRow(;var cell1 = newRow.insertCell(;var cell2 = newRow.insertCell(;//设置新的单元格内容cell1.innerHTML = "3";cell2.innerHTML = "Tom";```上述代码会在表格末尾添加一行新的表格行，并在该行中插入两个表格单元格，通过设置innerHTML属性来动态修改单元格内容。

3. 使用createElement和appendChild方法动态创建表格：```//创建新的表格行和单元格var newRow = document.createElement("tr");var cell1 = document.createElement("td");var cell2 = document.createElement("td");//设置新的单元格内容cell1.innerHTML = "4";cell2.innerHTML = "Lisa";//将新的单元格添加到新的表格行中newRow.appendChild(cell1);newRow.appendChild(cell2);//获取表格元素并将新的表格行添加到表格中var table = document.getElementById("myTable");table.appendChild(newRow);```上述代码会动态创建一个新的表格行和两个新的表格单元格，并将它们逐级添加到表格中，从而实现动态修改表格的效果。

JS实现动态修改table及合并单元格的方法示例

JS实现动态修改table及合并单元格的⽅法⽰例本⽂实例讲述了JS实现动态修改table及合并单元格的⽅法。

分享给⼤家供⼤家参考，具体如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>table</title><script language="javascript" type="text/javascript">function maketotal(){var pageCount=4;var currenttype;var indexstr="";var tabObj = document.getElementById("printtable");//⾏数var rowCount = tabObj.rows.length;//列数var cellCount = tabObj.rows[0].cells.length;for(var q=1;q<rowCount;q++){choosetype=tabObj.rows[q].cells[0].innerHTML;if(q==1){currenttype=choosetype;}if(currenttype!=choosetype){indexstr=q+","+indexstr;}}alert(indexstr.split(",").length);for(var p=0;p<indexstr.split(",").length;p++){var temp=indexstr.split(",")[p];if(temp!=""){var newRow = tabObj.insertRow(temp);for(var g=0;g<cellCount;g++){var littleCount=0;for(var h=1;h<rowCount;h++){if(tabObj.rows[h].cells[g]){if(g>1){littleCount=littleCount+parseInt(tabObj.rows[h].cells[g].innerHTML);}}}if(g>1&&g!=6){newRow.insertCell(g).innerHTML=littleCount;}else if(g==6){newRow.insertCell(g).innerHTML="";}else{newRow.insertCell(g).innerHTML="⼩计";}}}}var newRow = tabObj.insertRow(0);for(var g=0;g<cellCount;g++){if(g==0){//newRow.insertCell(g).innerHTML="头部";}else{//newRow.insertCell(g).innerHTML="头部";}//alert(tabObj.rows[1].cells[g]);newRow.insertCell(g).innerHTML="头部";//tabObj.rows[0].cells[g].colsSpan =2;//tabObj.rows[0].cells[g].rowsSpan =2;tabObj.rows[1].cells[g].style.background="#CCCCCC";tabObj.rows[0].cells[g].style.background="#CCCCCC";//tabObj.rows[0].cells[g].rowSpan=2}tabObj.rows[0].cells[2].colSpan =2;tabObj.rows[0].cells[4].innerHTML="反映形式";tabObj.rows[0].cells[5].colSpan=1;tabObj.rows[0].cells[5].innerHTML="反映形式";tabObj.rows[0].cells[6].colSpan=7;tabObj.rows[0].cells[6].innerHTML="";tabObj.rows[0].cells[7].style.display = "none";tabObj.rows[0].cells[8].style.display = "none";tabObj.rows[0].cells[9].style.display = "none";tabObj.rows[0].cells[10].style.display = "none";tabObj.rows[0].cells[11].style.display = "none";tabObj.rows[0].cells[12].style.display = "none";tabObj.rows[0].cells[13].style.display = "none";tabObj.rows[0].cells[14].style.display = "none";}</script><script language="javascript" type="text/javascript">document.onreadystatechange = subSomething;function subSomething(){if(document.readyState == "complete")maketotal();}</script></head><body><input type="button" onclick="maketotal()" value="遍历table"/><DIV class=pageNext><H1 id=printtitle align=center><FONT style="FONT-FAMILY: ⾪书; FONT-SIZE: 34px">反映来源统计</FONT></H1><TABLE border="1" id="printtable" style="TEXT-ALIGN: center; BORDER-COLLAPSE: collapse" class=di width="100%"> <TBODY><TR><TD>处理分类</TD><TD>处理内容</TD><TD>来电数</TD><TD>来访数</TD><TD>接办数</TD><TD>待办数</TD><TD>回复率</TD><TD>fffff</TD><TD>⽔⼚总部</TD><TD>营业厅</TD><TD>客户服务中⼼</TD><TD>管线部</TD><TD>信息中⼼</TD><TD>稽查科</TD><TD>⽔质检测</TD><TD>安装公司</TD></TR><TR height=30><TD>测试分类</TD><TD>⽔务局</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD></TR><TR height=30><TD>测试分类</TD><TD>投诉</TD><TD>0</TD><TD>0</TD><TD>40</TD><TD>2</TD><TD>95.24</TD><TD>0</TD><TD>0</TD></TR> <TR height=30><TD>测试分类</TD> <TD>⽹格中⼼</TD> <TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD></TR> <TR height=30><TD>测试分类</TD> <TD>居民⽤户</TD> <TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD></TR> <TR height=30><TD>测试分类</TD> <TD>政府办</TD> <TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD></TR> <TR height=30><TD>测试分类</TD> <TD>单位⽤户</TD> <TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD></TR><TD>95.24</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>0</TD></TR></TBODY></TABLE></DIV></body></html>运⾏效果图如下：更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

js+Html实现表格可编辑操作

js+Html实现表格可编辑操作本⽂实例为⼤家分享了js+Html实现表格可编辑操作的具体代码，供⼤家参考，具体内容如下功能描述：单击页⾯使单元格td变成可编辑状态，输⼊内容后，当单元格失去焦点时，保存输⼊的内容。

点击增加⾏，在table的末尾增加⼀⾏；点击删除⾏，删除table中最末尾的⼀⾏。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>编辑表格数据</title><style type="text/css"></style><script>/*** JS实现可编辑的表格* ⽤法:EditTables(tb1,tb2,tb2,......);**///设置多个表格可编辑function EditTables(){for(var i=0;i<arguments.length;i++){SetTableCanEdit(arguments[i]);}}//设置表格是可编辑的function SetTableCanEdit(table){for(var i=1; i<table.rows.length;i++){SetRowCanEdit(table.rows[i]);}}function SetRowCanEdit(row){for(var j=0;j<row.cells.length; j++){//如果当前单元格指定了编辑类型，则表⽰允许编辑var editType = row.cells[j].getAttribute("EditType");if(!editType){//如果当前单元格没有指定，则查看当前列是否指定editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");}if(editType){row.cells[j].onclick = function (){EditCell(this);}}}}//设置指定单元格可编辑function EditCell(element, editType){var editType = element.getAttribute("EditType");if(!editType){//如果当前单元格没有指定，则查看当前列是否指定editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");}switch(editType){case "TextBox":CreateTextBox(element, element.innerHTML);break;case "DropDownList":CreateDropDownList(element);break;default:break;}}//为单元格创建可编辑输⼊框function CreateTextBox(element, value){//检查编辑状态，如果已经是编辑状态，跳过var editState = element.getAttribute("EditState");if(editState != "true"){//创建⽂本框var textBox = document.createElement("INPUT");textBox.type = "text";textBox.className="EditCell_TextBox";//设置⽂本框当前值if(!value){value = element.getAttribute("Value");}textBox.value = value;//设置⽂本框的失去焦点事件textBox.onblur = function (){CancelEditCell(this.parentNode, this.value);}//向当前单元格添加⽂本框ClearChild(element);element.appendChild(textBox);textBox.focus();textBox.select();//改变状态变量element.setAttribute("EditState", "true");element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);}}//为单元格创建选择框function CreateDropDownList(element, value){//检查编辑状态，如果已经是编辑状态，跳过var editState = element.getAttribute("EditState");if(editState != "true"){//创建下接框var downList = document.createElement("Select");downList.className="EditCell_DropDownList";//添加列表项var items = element.getAttribute("DataItems");if(!items){items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems"); }if(items){items = eval("[" + items + "]");for(var i=0; i<items.length; i++){var oOption = document.createElement("OPTION");oOption.text = items[i].text;oOption.value = items[i].value;downList.options.add(oOption);}}//设置列表当前值if(!value){value = element.getAttribute("Value");}downList.value = value;//设置创建下接框的失去焦点事件downList.onblur = function (){CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);}//向当前单元格添加创建下接框ClearChild(element);element.appendChild(downList);downList.focus();//记录状态的改变element.setAttribute("EditState", "true");element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);}}//取消单元格编辑状态function CancelEditCell(element, value, text){element.setAttribute("Value", value);if(text){element.innerHTML = text;}else{element.innerHTML = value;}element.setAttribute("EditState", "false");//检查是否有公式计算CheckExpression(element.parentNode);}//清空指定对象的所有字节点function ClearChild(element){element.innerHTML = "";}//添加⾏function AddRow(table, index){var lastRow = table.rows[table.rows.length-1];var newRow = lastRow.cloneNode(true);//计算新增加⾏的序号，需要引⼊jquery 的jar包var startIndex = $.inArray(lastRow,table.rows);var endIndex = table.rows;table.tBodies[0].appendChild(newRow);newRow.cells[0].innerHTML=endIndex-startIndex;SetRowCanEdit(newRow);return newRow;}//删除⾏function DeleteRow(table, index){for(var i=table.rows.length - 1; i>0;i--){var chkOrder = table.rows[i].cells[0].firstChild;if(chkOrder){if(chkOrder.type = "CHECKBOX"){if(chkOrder.checked){//执⾏删除table.deleteRow(i);}}}}}//提取表格的值,JSON格式function GetTableData(table){var tableData = new Array();alert("⾏数：" + table.rows.length);for(var i=1; i<table.rows.length;i++){tableData.push(GetRowData(tabProduct.rows[i]));}return tableData;}//提取指定⾏的数据，JSON格式function GetRowData(row){var rowData = {};for(var j=0;j<row.cells.length; j++){name = row.parentNode.rows[0].cells[j].getAttribute("Name");if(name){var value = row.cells[j].getAttribute("Value");if(!value){value = row.cells[j].innerHTML;}rowData[name] = value;}}//alert("ProductName:" + rowData.ProductName);//或者这样：alert("ProductName:" + rowData["ProductName"]);return rowData;}//检查当前数据⾏中需要运⾏的字段function CheckExpression(row){for(var j=0;j<row.cells.length; j++){expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");//如指定了公式则要求计算if(expn){var result = Expression(row,expn);var format = row.parentNode.rows[0].cells[j].getAttribute("Format");if(format){//如指定了格式，进⾏字值格式化row.cells[j].innerHTML = formatNumber(Expression(row,expn), format); }else{row.cells[j].innerHTML = Expression(row,expn);}}}}//计算需要运算的字段function Expression(row, expn){var rowData = GetRowData(row);//循环代值计算for(var j=0;j<row.cells.length; j++){name = row.parentNode.rows[0].cells[j].getAttribute("Name"); if(name){var reg = new RegExp(name, "i");expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));}}return eval(expn);}////*** 格式化数字显⽰⽅式* ⽤法* formatNumber(12345.999,'#,##0.00');* formatNumber(12345.999,'#,##0.##');* formatNumber(123,'000000');* @param num* @param pattern*//* 以下是范例formatNumber('','')=0formatNumber(123456789012.129,null)=123456789012formatNumber(null,null)=0formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12 formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12 formatNumber(123456789012.129,'#0.00')=123,456,789,012.12 formatNumber(123456789012.129,'#0.##')=123,456,789,012.12 formatNumber(12.129,'0.00')=12.12formatNumber(12.129,'0.##')=12.12formatNumber(12,'00000')=00012formatNumber(12,'#.##')=12formatNumber(12,'#.00')=12.00formatNumber(0,'#.##')=0*/function formatNumber(num,pattern){var strarr = num?num.toString().split('.'):['0'];var fmtarr = pattern?pattern.split('.'):[''];var retstr='';// 整数部分var str = strarr[0];var fmt = fmtarr[0];var i = str.length-1;var comma = false;for(var f=fmt.length-1;f>=0;f--){switch(fmt.substr(f,1)){case '#':if(i>=0 ) retstr = str.substr(i--,1) + retstr;break;case '0':if(i>=0) retstr = str.substr(i--,1) + retstr;else retstr = '0' + retstr;break;case ',':comma = true;retstr=','+retstr;break;}}if(i>=0){if(comma){var l = str.length;for(;i>=0;i--){retstr = str.substr(i,1) + retstr;if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;}}else retstr = str.substr(0,i+1) + retstr;}retstr = retstr+'.';// 处理⼩数部分str=strarr.length>1?strarr[1]:'';fmt=fmtarr.length>1?fmtarr[1]:'';i=0;for(var f=0;f<fmt.length;f++){switch(fmt.substr(f,1)){case '#':if(i<str.length) retstr+=str.substr(i++,1);break;case '0':if(i<str.length) retstr+= str.substr(i++,1);else retstr+='0';break;}}return retstr.replace(/^,+/,'').replace(/\.$/,'');}</script></head><body><form id="form1" name="form1" method="post" action=""><h3>可编辑的表格</h3><table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct"><tr><td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td><td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td><td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名称</td> <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td><td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td><td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td></tr><tr><td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td><td bgcolor="#FFFFFF">1</td><td bgcolor="#FFFFFF" Value="c">C</td><td bgcolor="#FFFFFF">0</td><td bgcolor="#FFFFFF">0</td><td bgcolor="#FFFFFF">0</td></tr><tr><td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td><td bgcolor="#FFFFFF">2</td><td bgcolor="#FFFFFF" Value="d">D</td><td bgcolor="#FFFFFF">0</td><td bgcolor="#FFFFFF">0</td><td bgcolor="#FFFFFF">0</td></tr></table><br /><input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" /><input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" /><input type="button" name="Submit22" value="重置" onclick="window.location.reload()" /><input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" /></form><script language="javascript" src="GridEdit.js"></script><script language="javascript">var tabProduct = document.getElementById("tabProduct");// 设置表格可编辑// 可⼀次设置多个，例如：EditTables(tb1,tb2,tb2,......)EditTables(tabProduct);</script></body></html>效果如下：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JS实现双击编辑可修改状态的方法

JS实现双击编辑可修改状态的⽅法本⽂实例讲述了JS实现双击编辑可修改状态的⽅法。

分享给⼤家供⼤家参考。

具体如下：这是现在流⾏的⼀个表单特效，在⽹页上单击某⽂字，⽂字变为编辑状态，或者是让输⼊新⽂字，这就是JavaScript控制表单的⼀个例⼦，下⾯的这段代码就实现了⽤户名和签名档的双击可编辑功能。

运⾏效果如下图所⽰：在线演⽰地址如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>JS实现双击编辑可修改状态</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><script type="text/javascript">function ShowElement(element){var oldhtml = element.innerHTML;var newobj = document.createElement('input');//创建新的input元素newobj.type = 'text';//为新增元素添加类型newobj.onblur = function(){element.innerHTML = this.value ? this.value : oldhtml;//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值}element.innerHTML = '';element.appendChild(newobj);newobj.focus();}</script></head><body><dl><dt>你的⽤户名:</dt><dd ondblclick="ShowElement(this)">三⼈⾏团队</dd><dt>你的个性档</dt><dd ondblclick="ShowElement(this)">我闪故我在</dd></dl></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

JS制作可编辑表格

JS制作可编辑表格<html><head><title></title></head><body><table id="editTable" border="1"><tr><td>aaaaaaa</td><td>bbbbbbb</td><td>ccccccc</td></tr><tr><td>ddddddd</td><td>eeeeeee</td><td>fffffff</td></tr><tr><td>gggggggg</td><td>hhhhhhhh</td><td>iiiiiiii</td></tr></table></body></html><script>//dom创建⽂本框var input = document.createElement("input");input.type="text" ;//得到当前的单元格var currentCell ;function editCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根据Dimmacro 的建议修定下⾯的bug ⾮常感谢if(currentCell.tagName=="TD"){//⽤单元格的值来填充⽂本框的值input.value=currentCell.innerHTML;//当⽂本框丢失焦点时调⽤lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把⽂本框加到当前单元格上.currentCell.appendChild(input);//根据liu_binq63 的建议修定下⾯的bug ⾮常感谢input.focus();}}function last(){//充⽂本框的值给当前单元格currentCell.innerHTML = input.value;}//最后为表格绑定处理⽅法.document.getElementById("editTable").ondblclick=editCell;</script>双击表格的单元格后出现⼀个⽂本框，⽤户编辑完成后将⽤户添的值重新给这个单元格。

Vue.js实现可编辑的表格

Vue.js实现可编辑的表格本⽂实例为⼤家分享了Vue.js实现可编辑的表格的具体代码，供⼤家参考，具体内容如下<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href="bootstrap.min.css" ><style type="text/css">table tr td{text-align: center;}.btn-info{margin-left: 5px;}.add,.addBox{margin: 10px 0px 10px 10px;}.submit{margin-left: 172px;}/*全删*/.delAll{margin-left: 10px;}/*新增*/fieldset{margin-left: 10px;}</style></head><body><div id="app"><button class="btn btn-primary btn-sm addBox" @click="addBox">添加</button><button class="btn btn-sm btn-danger delAll" @click="delAll">批量删除</button><table class="table table-bordered" ><thead><tr><td><input type="checkbox" @click="allSelect" v-model="checked"></td><td>学号</td><td>姓名</td><td>年纪</td><td>操作</td></tr></thead><tbody><tr v-for="person,index in people"><td><input type="checkbox" v-model="selected" v-bind:value="person.sid"></td><td @click="edit(index)" contenteditable="true">{{person.sid}}</td><td @click="edit(index)" contenteditable="true">{{person.sname}}</td><td @click="edit(index)" contenteditable="true">{{person.sage}}</td><td><button @click="del(index)" class="btn btn-danger btn-sm">删除</button><button @click="update(index)" class="btn btn-info btn-sm">编辑</button></td> </tr></tbody></table><fieldset v-show="seen" ><legend>新增⽤户</legend><div class=""><p><label>学号：</label><input type="text" v-model="newPeople.sid"></p><p><label>姓名：</label><input type="text" v-model="newPeople.sname"></p><p><label>年龄：</label><input type="number" v-model="newPeople.sage"></p><p><button class="btn btn-success btn-sm submit" @click="add">提交</button></p></div></fieldset><fieldset v-show="editSeen"><legend>编辑⽤户</legend><div class=""><p><label>学号：</label><input type="text" v-model="editPeople.sid" value="{{sid}}"></p><p><label>姓名：</label><input type="text" v-model="editPeople.sname" value="{{sname}}"></p><p><label>年龄：</label><input type="number" v-model="editPeople.sage" value="{{sage}}"></p><p><button class="btn btn-success btn-sm submit" @click="editSubmit">提交</button> </p></div></fieldset></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var data ={people:[{'sid':'1043','sname':'张三','sage':18},{'sid':'2434','sname':'赵六','sage':43},{'sid':'3424','sname':'李四','sage':42},{'sid':'1231','sname':'王五','sage':35}],newPeople:{'sid':'','sname':'','sage':''},seen:false,editSeen:false,checked:false,selected:[],editPeople:{'sid':'','sname':'','sage':''}} ;var app = new Vue({'el':'#app',data:data,methods:{// 添加addBox:function(){this.seen = this.seen == false ? true : false;},//删除del:function(index){console.log(11);this.people.splice(index,1);},//提交add:function(){//插⼊到people中this.people.push(this.newPeople);this.newPeople = {};this.seen = false},//全选allSelect:function(){if(this.selected.length != this.people.length){this.selected = [];for(var i = 0; i<this.people.length;i++){this.selected.push(this.people[i].sid);console.log(this.people[i].sid);}}else{this.selected = [];}},//批量删除delAll:function(){for(var j = 0; j< this.selected.length;j++){for(var i = 0; i< this.people.length; i++){if(this.selected[j] == this.people[i].sid){this.people.splice(i,1);}}}},//编辑update:function(index){this.editSeen = true;this.editPeople = this.people[index];},//编辑后提交editSubmit:function(){this.editSeen = false;}},watch:{"selected":function(){if(this.selected.length == this.people.length){this.checked = true;}else{this.checked = false;}}}})</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js实现单击可修改表格

js实现单击可修改表格纯js实现单击可修改表格（类似成绩单），供⼤家参考，具体内容如下功能：实现成绩单单击表格可对数据进⾏修改且对输⼊的数字⼤⼩有验证例如不⼩于0不⼤于100，总分栏会对总分进⾏求和(利⽤了es6的模板字符串）。

实现效果：代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{margin: 0 auto;z-index:999999;border-collapse: collapse;}th {background-color: #4CAF50;/* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */color: white;}table th,tr,td{width:100px;text-align: center;}table input{border:none;outline: none;width: 100%;}.inputClass{width:80px;height:100%}</style></head><body><div style="position: relative;margin-top: 200px;text-align:center"><h2 style="margin-bottom: 50px;">成绩登记表</h2><div ><table border="1"><thead><th>学号</th><th>姓名</th><th>语⽂</th><th>数学</th><th>英语</th><th>总分</th></thead><tbody></tbody></table></div></div></body><script>// 数组let data = [{id:1101,name:'⼩王',Chinese:100,Math:80,English:91,total:271},{id:1102,name:'⼩曾',Chinese:88,Math:87,English:92,total:267},{id:1103,name:'⼩赵',Chinese:75,Math:20,English:86,total:181},{id:1104,name:'⼩周',Chinese:65,Math:81,English:83,total:229}]window.onload = function(){initdata()}//初始化数据// 模板填⼊数据function initdata(){let tbodyinner = document.getElementsByTagName("tbody")[0]let html = ''for(let i=0;i<data.length;i++){html+=`<tr><td>${data[i].id}</td><td>${data[i].name}</td><td name="grade" class="chinese">${data[i].Chinese}</td><td name="grade" class="math">${data[i].Math}</td><td name="grade" class="english">${data[i].English}</td><td class="allscore">${parseInt(data[i].Chinese)+parseInt(data[i].Math)+parseInt(data[i].English)}</td> </tr>`}// tbody.innerHTML="..."往tbody中添加内容tbodyinner.innerHTML = htmlgetNode()}// 监听click事件function getNode(){let subject = document.getElementsByName("grade")for(let i=0;i<subject.length;i++){subject[i].addEventListener('click',function(){edit(this)})}}//⿏标移⼊点function edit(i){let inputlen = document.getElementsByTagName('input').lengthlet oldvalue = i.innerHTMLif(inputlen==0){// 设置该标签为空i.innerHTML = ''// 添加input对象let inp = document.createElement("input")inp.value = oldvalueinp.classList.add("inputClass")// 添加⼦节点i.appendChild(inp)// 获取⽂本中的内容inp.select()// 失去焦点事件inp.onblur = function(){if(inp.value<=100&&inp.value>=0){i.innerHTML = inp.valuelet val1 = i.parentNode.childNodes[5].innerHTMLlet val2 = i.parentNode.childNodes[7].innerHTMLlet val3 = i.parentNode.childNodes[9].innerHTMLi.parentNode.childNodes[11].innerHTML = parseInt(val1)+parseInt(val2)+parseInt(val3) }else{return alert("数据值不对，请重新输⼊！");}}}}</script></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

竭诚为您提供优质文档/双击可除js实现表格可编辑
篇一：用js实现的表格
"http://
f
152.00
20xx-12-09
点击标题可排序
//添加行
"
functionaddRow(table,index){
varlastRow=table.rows[table.rows.length-1];
varnewRow=lastRow.clonenode(true);
table.tbodies[0].appendchild(newRow);
setRowcanedit(newRow);
returnnewRow;
}
functiondelete_row(rname){
//函数delete_row用于删除一行
vari;
i=window.event.srcelement.parentnode.parentnode.row index;if(confirm(确定删除第+i+行))
tabproduct.deleteRow(i);
}
functionmove_up(rname)
{
//上移一行
vari;
i=window.event.srcelement.parentnode.parentnode.row index;if(i>=2)
change_row(i-1,i);
else
alert(第一行不能上移！);
}
functionmove_down(rname)
{
//下移一行
vari;
i=window.event.srcelement.parentnode.parentnode.row index;if(i change_row(i+1,i);
else
alert(最后一行不能下移！);
}
functionchange_row(line1,line2)
{
//执行交换
tabproduct.rows[line1].swapnode(tabproduct.rows[lin e2]);
}
//转换器，将列的字段类型转换为可以排序的类型：string,int,floatfunctionconvert(sValue,sdatatype){ switch(sdatatype){
case"int":
sdatatype);
sdatatype);
returnparseint(sValue);case"float":returnparseFloat (sValue);case"date":returnnewdate(date.parse(sValue ));default:returnsValue.tostring();}}//排序函数产生器，icol表示列索引，sdatatype表示该列的数据类型functiongeneratecomparetRs(icol,sdatatype){returnfu nctioncomparetRs(otR1,otR2){varvValue1=convert(otR1 .cells[icol].firstchild.nodeValue,varvValue2=conver t(otR2.cells[icol].firstchild.nodeValue,if(vValue1v Value2){return1;}else{return0;}};}//排序方法functionsorttable(stableid,icol,sdatatype){varotabl e=document.getelementbyid(stableid);varotbody=otabl e.tbodies[0];
篇二：14-jquery：实现可编辑的表格
jqueryedit.html：
"http://的jquery示例：可以编辑的表格
-->
123123
456456
jqueryedit.js：
//在页面装载时，让所有的td都拥有一个点击事件$(document).ready(function(){
//找到所有的td节点
vartds=$("td");
//给所有的td节点增加点击事件。

js实现表格可编辑