用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元素，然后依次创建了两行两列的表格。

jsgrid 表格框架

JSGrid 是一个轻量级的JavaScript 表格框架，它提供了丰富的功能和灵活的配置选项，可以轻松JSGrid 是一个轻量级的JavaScript 表格框架，它提供了丰富的功能和灵活的配置选项，可以轻松地创建和管理HTML 表格。

以下是使用JSGrid 创建一个简单表格的示例代码：首先，在HTML 文件中引入JSGrid 的相关文件：```html<link rel="stylesheet" type="text/css" href="/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" /><script src="/jquery-3.6.0.min.js"></script><script src="/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>```然后，在HTML 文件中添加一个表格容器：```html<div id="jsGrid"></div>```接下来，在JavaScript 文件中编写以下代码来初始化JSGrid 表格：```javascript$("#jsGrid").jsGrid({width: "100%",height: "400px",heading: "客户信息",sorting: true,filtering: true,editing: true,deleting: true,autoload: true,controller: {loadData: function(filter) {return $.ajax({type: "GET",url: "/api/customers", // API 地址，根据实际情况修改data: filter,success: function(data) {return data; // 返回数据给表格组件}});insertItem: function(item) {return $.ajax({type: "POST",url: "/api/customers", // API 地址，根据实际情况修改data: item,success: function(response) {if (response.success) { // 如果插入成功，重新加载表格数据$("#jsGrid").jsGrid("loadData");} else { // 如果插入失败，显示错误信息alert("插入失败：" + response.error);}}});},updateItem: function(item) {return $.ajax({type: "PUT",url: "/api/customers/" + item.id, // API 地址，根据实际情况修改data: item,success: function(response) {if (response.success) { // 如果更新成功，重新加载表格数据$("#jsGrid").jsGrid("loadData");} else { // 如果更新失败，显示错误信息alert("更新失败：" + response.error);}}});},deleteItem: function(item) {return $.ajax({type: "DELETE",url: "/api/customers/" + item.id, // API 地址，根据实际情况修改success: function(response) {if (response.success) { // 如果删除成功，重新加载表格数据$("#jsGrid").jsGrid("loadData");} else { // 如果删除失败，显示错误信息alert("删除失败：" + response.error);}}});},fields: [{ name: "ID", type: "number", width: 50 }, // ID字段，类型为数字，宽度为50像素，根据实际情况修改其他字段的属性和顺序即可]。

js中表格的用法

js中表格的用法JavaScript作为一种非常流行的编程语言，在web开发中使用越来越广泛。

而表格在web开发中也是比较常见的元素。

在JS语言中，可以通过操作DOM（文档对象模型）来动态地创建表格、修改表格、删除表格等等操作。

接下来，我们就来一步一步地学习JS中表格的用法。

1. 创建表格首先，我们可以通过JS创建一个table元素，如下所示:```var table = document.createElement("table");```接着，我们可以创建一个tr（表格行）元素，并将其添加到table元素中：```var row = table.insertRow();```然后，我们可以创建一些td元素（表格单元格），并将其添加到tr元素中:```var cell1 = row.insertCell();cell1.innerHTML = "第一列";var cell2 = row.insertCell();cell2.innerHTML = "第二列";```最后，我们通过appendChild()方法将table元素添加到文档中，就可以看到我们新创建的表格了：```document.body.appendChild(table);```2. 修改表格创建表格之后，我们也可以通过JS来修改表格。

比如，我们可以动态地添加一行到表格中：```var newRow = table.insertRow();var newCell1 = newRow.insertCell();newCell1.innerHTML = "新的一行";var newCell2 = newRow.insertCell();newCell2.innerHTML = "新的一行";```此外，我们也可以通过JS来修改表格的样式，比如表格边框的颜色、字体的大小等等。

js实现表格动态合并的方法

js实现表格动态合并的方法摘要：1.引言2.表格动态合并的背景和需求3.JavaScript实现表格动态合并的方法a.方法一：使用表格标签`<colgroup>`和`<col>`b.方法二：使用CSS样式c.方法三：使用JavaScript操作DOM元素4.总结正文：在网页开发中，我们常常需要实现表格的动态合并功能，例如在表格行数变化、列数调整等情况下，如何实现表格单元格的动态合并。

本文将介绍三种使用JavaScript实现表格动态合并的方法。

首先，我们需要了解表格动态合并的背景和需求。

在实际应用中，表格数据可能会发生变化，如行数增加、列数调整等，这时就需要对表格进行动态调整。

而表格合并功能可以让用户更方便地查看和操作表格数据，提高用户体验。

下面，我们来介绍三种实现表格动态合并的方法：方法一：使用表格标签`<colgroup>`和`<col>`。

在HTML5中，表格标签`<colgroup>`和`<col>`可以实现表格列的动态合并。

例如：<table><colgroup><col style="width: 100px;" /><col style="width: 100px;" /></colgroup><tr><td colspan="2">合并的单元格</td></tr></table>```这里，我们使用`<colgroup>`定义了一个2列的列组，然后使用`<td colspan="2">`将单元格合并。

通过调整列宽和合并的列数，可以实现动态合并效果。

方法二：使用CSS样式。

我们可以使用CSS样式来实现表格动态合并。

JavaScript实现Excel表格效果

JavaScript实现Excel表格效果本⽂实例为⼤家分享了JavaScript实现Excel表格效果的具体代码，供⼤家参考，具体内容如下⼀.主要实现：1.List item2.输⼊内容时显⽰边框3.⿏标点击⽂本框以外部分失去焦点<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>仿Excell表格</title><style type="text/css">*{margin: 0;padding: 0;}.plist{width: 800px;margin: 100px auto;border: 1px solid #aaa;border-collapse: collapse;}.plist caption{font: 700 20px/28px "微软雅⿊";padding: 10px;}.plist th,.plist td{width: 120px;line-height: 20px;font-size: 14px;font-family: "微软雅⿊";border: 1px solid #aaa;text-align: center;padding: 4px;}.plist td{padding: 0;}.plist tr.headline{background-color: #379;}.plist td input{height: 24px;text-align: left;border: none;outline-style: none;font-size: 14px;border: 2px solid #fff;}.plist .alt{ /*设置⿏标点击时出现的框*/border: 2px solid #222;}</style></head><body><table id="price" class="plist"><caption>2016电脑配件价格清单</caption><tr class="headline"><th>配件</th><th>第⼀季度</th><th>第⼆季度</th><th>第三季度</th><th>第四季度</th></tr><tr><th>CPU</th><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr><tr><th>hard disc</th><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr><tr><th>main bord</th><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr><tr><th>memory</th><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr><tr><th>mouse</th><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr></table></body></html>这⾥是⼀个样式表和⽂本，⽤来⽣成表格，下⾯是js代码<script>window.onload = function (){var Tab = document.getElementById('price');var Inputs = Tab.getElementsByTagName('input');for(var i=0; i<Inputs.length;i++){Inputs[i].onfocus = function (){this.className = 'alt';}Inputs[i].onblur = function (){this.className = '';}}}</script>样式为：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

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，您可以编写脚本来自动化这些操作，比如对数据进行排序、筛选、计算等。

excel javascript api 案例

Excel JavaScript API 是一个允许开发者使用 JavaScript 编写代码来与 Excel 交互的 API。

以下是一个简单的示例，展示了如何使用 Excel JavaScript API 创建一个工作表，并向其中添加数据。

```javascript// 创建一个新的工作簿var workbook = Excel.run(function(context) {// 创建一个新的工作表var worksheet = workbook.addWorksheet("My Sheet");// 向工作表中添加数据worksheet.getCell("A1").setValue("Hello");worksheet.getCell("B1").setValue("World");// 保存工作簿return workbook.save();});// 等待异步操作完成workbook.onCompleted(function() {console.log("工作簿已保存");});```在这个示例中，我们首先创建了一个新的工作簿，并添加了一个名为 "My Sheet" 的工作表。

然后，我们向单元格 "A1" 和 "B1" 中添加了数据 "Hello" 和 "World"。

最后，我们保存了工作簿并等待异步操作完成。

这只是一个简单的示例，Excel JavaScript API 还提供了许多其他功能，例如读取和写入单元格数据、格式化单元格、创建图表等等。

你可以查阅 Excel JavaScript API 的文档以了解更多信息。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>动态表格</title><style type="text/css">body,div,p,ul,li,font,span,td,th{font-size:10pt;line-height:155%;}body,table{margin:0;padding:0;font-size:14px;font-family :@华文楷体;}table,tr,th,td{border:1px solid #cdc;}th{background-color:#76AEF0;width:100px;}tr{background-color:#E5F1FF;}td{border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCCCCC;font-style :italic ;}.EditCell_TextBox {width: 90%;border:1px solid #0099CC;}</style></head><body><form id="form1" name="form1" method="post" action=""><table width="698" border="0" id="tabProduct" align="center" ><tr><th width="186" align="center" Name="title" EditType="TextBox"onclick="sortTable('tabProduct',0)" style="cursor:pointer">标题</th> <th width="186" align="center" Name="content" EditType="TextBox"onclick="sortTable('tabProduct', 1)" style="cursor:pointer">内容</th> <th width="152" align="center" Name="author" EditType="TextBox" onclick="sortTable('tabProduct', 2)" style="cursor:pointer">提供者</th><th width="103" align="center" Name="price" EditType="TextBox" onclick="sortTable('tabProduct', 3, 'float')" style="cursor:pointer">价格</th><th width="103" align="center" Name="time" EditType="TextBox" onclick="sortTable('tabProduct', 4, 'date')" style="cursor:pointer">时间</th><th width="50"> </th><th width="50"> </th><th width="50"> </th></tr><tr><td>ABC</td><td>Java</td><td>a</td><td>112.50</td><td>2007-11-09</td><td><input type="button" value="删除" onclick="javascript:delete_row(1)"/></td><td><input type="button" value="上移" onclick="javascript:Move_up(this)"/></td> <td><input type="button" value="下移" onclick="javascript:Move_down(this)"/></td></tr><tr><td>Da</td><td>C++</td><td>d</td><td>142.22</td><td>2008-01-06</td><td><input type="button" value="删除" onclick="javascript:delete_row(2)"/></td> <td><input type="button" value="上移" onclick="javascript:Move_up(this)"/></td><td><input type="button" value="下移" onclick="javascript:Move_down(this)"/></td></tr><tr><td>T</td><td>C#</td><td>j</td><td>136.00</td><td>2009-02-18</td><td><input type="button" value="删除" onclick="javascript:delete_row(3)"/></td> <td><input type="button" value="上移" onclick="javascript:Move_up(this)"/></td><td><input type="button" value="下移" onclick="javascript:Move_down(this)"/></td></tr><tr><td>A</td><td></td><td>c</td><td>130.80</td><td>2007-06-09</td><td><input type="button" value="删除" onclick="javascript:delete_row(4)"/></td> <td><input type="button" value="上移" onclick="javascript:Move_up(this)"/></td><td><input type="button" value="下移" onclick="javascript:Move_down(this)"/></td></tr><tr><td>X</td><td></td><td>f</td><td>152.00</td><td>2007-12-09</td><td><input type="button" value="删除" onclick="javascript:delete_row(5)"/></td> <td><input type="button" value="上移" onclick="javascript:Move_up(this)"/></td><td><input type="button" value="下移" onclick="javascript:Move_down(this)"/></td></tr></table><br /><table align="center"><input type="button" name="Submit" value="添加一行" onclick="AddRow(document.getElementById('tabProduct'),1)" /></table><p align="center">点击标题可排序</p></form><script language="javascript">//添加行function AddRow(table, index){var lastRow = table.rows[table.rows.length-1];var newRow = lastRow.cloneNode(true);table.tBodies[0].appendChild(newRow);SetRowCanEdit(newRow);return newRow;}function delete_row(rname) {//函数delete_row用于删除一行var i;i = window.event.srcElement.parentNode.parentNode.rowIndex;if (confirm('确定删除第' + i + '行?'))tabProduct.deleteRow(i);}function Move_up(rname){//上移一行var i;i =window.event.srcElement.parentNode.parentNode.rowIndex;if(i>=2)change_row(i-1,i);elsealert('第一行不能上移！');}function Move_down(rname){//下移一行var i;i = window.event.srcElement.parentNode.parentNode.rowIndex;if(i<tabProduct.rows.length-1)change_row(i+1,i);elsealert('最后一行不能下移！');}function change_row(line1,line2){//执行交换tabProduct.rows[line1].swapNode(tabProduct.rows[line2]);}//转换器，将列的字段类型转换为可以排序的类型：String,int,floatfunction convert(sValue, sDataType) {switch(sDataType) {case "int":return parseInt(sValue);case "float":return parseFloat(sValue);case "date":return new Date(Date.parse(sValue));default:return sValue.toString();}}//排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型function generateCompareTRs(iCol, sDataType) {return function compareTRs(oTR1, oTR2) {var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);if (vValue1 < vValue2) {return -1;} else if (vValue1 > vValue2) {return 1;} else {return 0;}};}//排序方法function sortTable(sTableID, iCol, sDataType) {var oTable = document.getElementById(sTableID);var oTBody = oTable.tBodies[0];var colDataRows = oTBody.rows;var aTRs = new Array;//将所有列放入数组for (var i=1; i < colDataRows.length; i++) {aTRs[i-1] = colDataRows[i];}//判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序if (oTable.sortCol == iCol) {for (var i=0; i < aTRs.length; i++) {aTRs[i] = aTRs[i];}aTRs.reverse();} else {//使用数组的sort方法，传进排序函数aTRs.sort(generateCompareTRs(iCol, sDataType));}var oFragment = document.createDocumentFragment();for (var i=1; i < aTRs.length; i++) {oFragment.appendChild(aTRs[i]);}oTBody.appendChild(oFragment);//记录最后一次排序的列索引oTable.sortCol = iCol;}//设置多个表格可编辑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 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 = "";}//提取指定行的数据，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;}}return rowData;}</script><script language="javascript">var tabProduct = document.getElementById("tabProduct");// 设置表格可编辑EditTables(tabProduct);</script></body></html>。