在HTML文档中引入JQeury和JavaScript脚本，实现动态生成添加修改删除表格案例。

时间: 2024-02-13 10:07:35 浏览: 75

基于JavaScript实现动态添加删除表格的行

又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，需要的朋友参考下在网页开发中，JavaScript是一种非常重要的脚本语言，它能够为HTML页面增添交互性。本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。我们来看HTML部分。一个简单的表格结构如下： ```html <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input name="productName" type="text"></td> <td><input name="productNumber" type="text"></td> <td><input name="quantity" type="text"></td> <td><input name="weight" type="text"></td> <td></td> </tr> </tbody> </table> <button type="button" onclick="addTable();">添加行</button> ``` 这个HTML定义了一个带有表头的表格，每一行包含四个输入框，用于输入产品信息，并且有一个空的`<td>`单元格，用于放置删除行的操作按钮。页面底部还有一个“添加行”按钮，当点击该按钮时，会调用JavaScript函数`addTable()`。接着，我们看JavaScript部分，有两个主要的函数：`addTable()`和`delRow()`。 `addTable()`函数用于向表格中添加新的行。通过`getElementById`获取到表格元素`viewTabs`，然后计算表格的列数`colsNum`。接着获取当前表格的行数`num`，并创建一个新的行`rownum`。然后，使用`insertRow`方法插入新行，并根据列数循环插入列。每列的内容是一个输入框，类型与现有行保持一致。最后一列插入一个删除链接，点击该链接会触发`delRow()`函数。 ```javascript function addTable() { var tab = document.getElementById("viewTabs"); var colsNum = tab.rows.item(0).cells.length; var num = document.getElementById("viewTabs").rows.length; var rownum = num; tab.insertRow(rownum); for (var i = 0; i < colsNum; i++) { tab.rows[rownum].insertCell(i); if (i == 0) { tab.rows[rownum].cells[i].innerHTML = '<input name="productName" type="text"/>'; } else if (i == 1) { tab.rows[rownum].cells[i].innerHTML = '<input name="productNumber" type="text"/>'; } else if (i == 2) { tab.rows[rownum].cells[i].innerHTML = '<input name="quantity" type="text"/>'; } else { tab.rows[rownum].cells[i].innerHTML = '<input name="weight" type="text"/>'; } } tab.rows[rownum].insertCell(i); tab.rows[rownum].cells[i].innerHTML = '<a href="#" onclick="delRow(this)">删除行</a>'; } ``` `delRow(obj)`函数负责删除行。传入参数`obj`是点击的删除链接，首先获取到父节点`tr`，然后不断向上查找直到找到`tr`标签，最后使用`removeChild`方法删除这一行。 ```javascript function delRow(obj) { var Row = obj.parentNode; while (Row.tagName.toLowerCase() != "tr") { Row = Row.parentNode; } Row.parentNode.removeChild(Row); // 删除行 } ``` 通过这两个函数的配合，我们可以实现动态添加和删除表格行的功能。当用户点击“添加行”按钮，新的行会被添加到表格的末尾，每个新行都有删除链接。点击删除链接，对应的行就会被移除。这种动态操作表格行的方法在Web应用中十分实用，例如在管理界面中，用户可以方便地添加或删除记录。同时，这种方法也适用于任何需要动态调整表格内容的场景，只需根据实际情况修改表格结构和数据即可。通过学习和理解这段代码，开发者可以更好地掌握JavaScript在DOM操作中的运用，提升网页的交互体验。

好的，我可以为您提供相关的代码示例。首先，请确保在HTML文档中正确引入jQuery和JavaScript脚本，如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态生成表格</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <table id="myTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>18</td> <td><button class="edit">编辑</button><button class="delete">删除</button></td> </tr> <tr> <td>2</td> <td>李四</td> <td>20</td> <td><button class="edit">编辑</button><button class="delete">删除</button></td> </tr> </tbody> </table> <button id="addRow">添加一行</button> </body> </html> ``` 其中，`<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>`是引入jQuery库的代码，`<script src="script.js"></script>`是引入JavaScript脚本的代码，`<table id="myTable">`是我们要动态生成的表格的标签。接下来，我们来看一下`script.js`文件的代码： ```javascript $(document).ready(function() { // 编辑按钮的点击事件 $(document).on("click", ".edit", function() { var row = $(this).closest("tr"); var id = row.find("td:eq(0)").text(); var name = row.find("td:eq(1)").text(); var age = row.find("td:eq(2)").text(); var new_name = prompt("请输入姓名", name); var new_age = prompt("请输入年龄", age); if (new_name != null && new_age != null) { row.find("td:eq(1)").text(new_name); row.find("td:eq(2)").text(new_age); } }); // 删除按钮的点击事件 $(document).on("click", ".delete", function() { $(this).closest("tr").remove(); }); // 添加一行按钮的点击事件 $("#addRow").click(function() { var id = $("#myTable tbody tr:last-child td:first-child").text(); if (id == "") { id = 1; } else { id = parseInt(id) + 1; } var name = prompt("请输入姓名", ""); var age = prompt("请输入年龄", ""); if (name != null && age != null) { var newRow = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td><button class='edit'>编辑</button><button class='delete'>删除</button></td></tr>"; $("#myTable tbody").append(newRow); } }); }); ``` 这段代码实现了编辑、删除和添加一行按钮的点击事件。具体来说，当用户点击编辑按钮时，会弹出一个对话框，让用户输入新的姓名和年龄，然后更新表格中对应的单元格；当用户点击删除按钮时，会删除该行数据；当用户点击添加一行按钮时，会弹出一个对话框，让用户输入新的姓名和年龄，然后在表格的最后一行添加一条新的数据。以上就是动态生成添加修改删除表格的代码示例，希望能对您有所帮助！

阅读全文

在HTML文档中引入JQeury和JavaScript脚本，实现动态生成添加修改删除表格案例。

相关推荐

【JavaScript源代码】JavaScript动态生成带删除行功能的表格.docx

使用jQuery实现动态添加、删除表格

在HTML文档中引入JQeury和JavaScript脚本，实现动态生成添加修改删除表格案例。可不使用全选按钮，而使用复选框

jquery实现心算练习代码

基于jquery和googleapi的统计图js控件

struts2+jQuery+json 实例 测试过了 运行成功 从别人那偷来的

html+js+css 工人信息管理功能（增删改查）前端实现，不连数据库

Chrome扩展插件开发Manifest V3案例:把某招聘网站上的招聘信息导出Excel

自学使用HTML和CSS进行网站发布

【Django Forms与jQuery集成】：动态响应Web前端构建的高级技术

django.utils.html实战案例：动态内容网站模板构建术

Python CGI与JavaScript互动：打造动态响应式界面的秘诀

【Java HTML解析器入门】：JSoup使用技巧与案例教程

【jQuery魔法】：用最少代码完成DOM操作的技巧

【Sphinx主题美化】：打造定制化文档外观，让你的文档脱颖而出

【WebHelpers.html.builder实例解析】：Python风格打造动态网页的最佳实践

ASP.NET网页设计基础与HTML_CSS

【WebHelpers.html.builder调试与测试】：确保代码质量的最佳实践指南

【WebHelpers.html.builder进阶教程】：掌握高级功能与性能优化的终极技巧

最新推荐

JQuery 动态生成Table表格实例代码

JS实现动态生成表格并提交表格数据向后端

jQuery动态添加li标签并添加属性和绑定事件方法

jQuery实现冻结表格行和列

动态添加表格数据（jQuery、Vue）

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析

struts2+jQuery+json 实例测试过了运行成功从别人那偷来的