JavaScript实现动态增删表格行
4星 · 超过85%的资源 需积分: 14 123 浏览量
更新于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
