JQuery实现动态操作表格
网络编程 2025-03-14 00:48www.168986.cn编程入门
下面是具体的HTML和jQuery代码:
```html
$(function () {
var tabRowLen = $("table tbody tr").length; // 获取初始行数
$("add").on("click", function () { // 点击添加行按钮
if (tabRowLen == 0 || 检查是否为空(tabRowLen)) { // 检查是否为空或当前行是否为空行
var index = tabRowLen; // 记录新行的索引
$("table tbody").append("
// 为删除按钮绑定点击事件
$(".delete").on("click", function () { // 删除当前行(可能需要在后续代码中调整以移除当前行内的元素绑定)
$(this).parents("tr").remove();
tabRowLen--; // 更新行数
});
} else { // 提示用户不能添加空行或当前存在空值的情况 }
});
$("table input").on("keyup", function () { // 输入框内容变化时触发非空验证函数 验证是否有空值 }
});
function 检查是否为空(trIndex) { // 实现非空验证的函数(注意这里的函数名与示例代码中的不同) }
姓名 | 年龄 |
---|