jquery动态往tr追加html,jQuery实现动态添加tr到table的方法

本文实例讲述了jQuery实现动态添加tr到table的方法。分享给大家供大家参考，具体如下：

运行效果图如下：

完整代码如下：

/p>

"http://www.w3.org/TR/html4/strict.dtd">

添加用户

添加用户:

姓名:

email:

电话:

提交

---

姓名	email	电话
Tom	tom@tom.com	5000	Delete
Jerry	jerry@sohu.com	8000	Delete

$(document).ready(function(){

$("#addUser").click(function(){

var name = $("#name").val();

var email = $("#email").val();

var tel = $("#tel").val();

var $tr = $("

"+

"

"+name+""+

"

"+email+""+

"

"+tel+""+

"

删除"

+"

");

var $table = $("#usertable");

$table.append($tr);

$tr.children().children().click(function(){

//alert($(domEle).parent().parent().children(":first").text());

//方法1.

// $(domEle).parent().parent().remove();

// return false;

//方法2.

return deleteTr($tr);

});

//不能在这里 给每个 加事件 ，每add一次就each一次，会重复弹出confirm

// $("tr td a").each(function(index,domEle){

// $(domEle).click(function(){

// //alert($(domEle).parent().parent().children(":first").text());

// //方法1.

$(domEle).parent().parent().remove();

return false;

// //方法2.

// return deleteTr($(domEle).parent().parent());

// });

//

// });

});

function deleteTr(aObject) {

var flag = window.confirm("您确定要删除"+aObject.children(":first").text()+"名称的值吗？");

// alert(flag);

if(!flag){

return false;

} else {

aObject.remove();

return false;

}

return false;

}

})

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。