JavaScript实现动态增删表格行

4星 · 超过85%的资源 需积分: 14 22 下载量 54 浏览量 更新于2024-09-16 收藏 4KB TXT 举报
该资源提供了一段纯JavaScript代码,用于实现HTML表格的自动增加和删除行功能。在网页中,用户可以通过调用这些函数来动态地添加或移除表格中的行,增强了用户交互性。 正文: 这段代码的核心是两个JavaScript函数:`xlh()` 和 `delRow()`。 1. `xlh()` 函数: 这个函数用于向表格(通过ID "tbl" 查找)中添加新的行。首先,它获取当前表格的第一行的单元格数量(`cellNum`),然后创建一个新的`<tr>`元素(表格行)。接着,它遍历单元格数量,为每个单元格创建一个新的`<td>`元素。对于第一个单元格(索引为1),它插入一个文本输入框,其余单元格则填充预设的文本。最后,将新创建的行添加到表格的第一个tbody中。 2. `delRow()` 函数: 这个函数用于删除表格的最后一行。它首先获取表格的行数(`rowNum`),如果存在行(即行数大于0),则删除最后一行(`rowNum-1`索引)。若无行可删,弹出警告提示。 此外,代码还包含了一个未完成的`addDate()`函数,看起来应该是为了在新添加的行中添加日期选择功能。目前,它会遍历表格的行数,但函数体内部的代码似乎被截断了。 在实际应用中,这些函数可以通过HTML按钮或其他用户交互元素调用,例如: ```html <button onclick="xlh()">添加行</button> <button onclick="delRow()">删除行</button> ``` 这样的功能对于数据输入、编辑或展示来说非常有用,特别是在需要用户动态修改表格内容的场景下。纯JavaScript实现使得这些功能无需依赖任何外部库,降低了页面加载时间和复杂性。但是,对于更复杂的交互,可能需要考虑使用像jQuery或AngularJS这样的库来提供更丰富的功能和更好的浏览器兼容性。
2020-12-29 上传
本文实例讲述了JS实现从表格中动态删除指定行的方法。分享给大家供大家参考。具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> [removed] function deleteRow(r) { var i=r[removed][removed].rowIndex; document.getElementById('myTable').deleteRow(i); } [removed] </head> <body> <t