html中table追加tr,html怎么给table标签动态添加tr

最新推荐文章于 2025-03-25 20:28:07 发布

WebNerd

最新推荐文章于 2025-03-25 20:28:07 发布

阅读量882

点赞数

文章标签： html中table追加tr

这篇博客介绍了如何在HTML中动态地为table标签添加tr行。提供了JavaScript代码示例，包括添加新行、删除行、清空表单值以及重置行序号的功能。示例代码涉及DOM操作和事件监听，适用于网页交互中的表格数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

满意答案

yipa017apq

推荐于 2016.06.25

采纳率：49% 等级：9

已帮助：464人

htm给table标签动态添加 tr(行)，具体参考代码如下：

usually function

序号	姓名	年龄	生日	备注
				删除

用户输入表单：

姓名

年龄

生日

备注

添加

function del(obj){

//alert($(obj).closest("tr").attr("outerHTML"));

//$(obj).closest("tr").attr("outerHTML","")

$(obj).closest("tr").remove();

resetSequenceNum();

}

function add(){

//获取表单的值

var u_username = $("input[name='u_username']").val();

var u_age = $("input[name='u_age']").val();

var u_birthday = $("input[name='u_birthday']").val();

var u_note = $("input[name='u_note']").val();

//alert(u_username);

//判断表单的值是否为空

if(u_username=="" || u_username==undefined){

alert("用户姓名不能为空");

$("input[name='u_username']").focus();

return false;

}

//缓存要赋值的内容，避免多次查询，提高效率

var trstr = $("#model").attr("outerHTML");

//alert(trstr);

//复制最后一行的代码添加到表的最后一行

$("#targetTable tr").last().after(trstr);

//$("#targetTable").find("tr").last().after(trstr);

//让最后一行显示出来，而不是隐藏

//$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题，在ff中显示不正常

$("#targetTable tr").last().css("display","");

//赋值

var target = $("#targetTable tr").last().find("td");

target.find("input[name='username']").val(u_username);

target.find("input[name='age']").val(u_age);

target.find("input[name='birthday']").val(u_birthday);

target.find("input[name='note']").val(u_note);

resetValue();

resetSequenceNum();

}

//清空表单的值

function resetValue(){

$("input[name='u_username']").val("");

$("input[name='u_age']").val("");

$("input[name='u_birthday']").val("");

$("input[name='u_note']").val("");

}

//重新设置序号

function resetSequenceNum(){

var num=0;

$("#targetTable tr").each(function(index,dom){

if(index!=0){

$(dom).find("td").first().html(num);

num++;

}

});

}

00分享举报