jQuery实现动态添加tr到桌子的方法

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

运行效果图如下：

完整代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题添加用户/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .2 .量滴js /脚本/头部身体中心brbr添加用户：brbr姓名：输入类型=' text ' name=' name ' id=' name '/email :输入类型='text' name='email' id='email' /电话：输入类型=“文本”名称='tel' id='tel' /brbr按钮id='addUser '提交/button brbr hr brbr表id='usertable '边框='1 '单元格填充='5 '单元格间距=0 tbody tr th姓名/第几天/第几天电话/th/th/tr/tr TdTom/TD[电子邮件受保护]/TD TD TD 5000/TD TDA href='删除EMP？id=Tom ' delete/a/TD/tr tdJerry/TD[email protected]/TD TD TD 8000/TD TDA href=' delete EMP？id=Jerry ' delete/a/TD/tr/t body/table/center/body script $(文档)。ready(function(){ $('#addUser ')).单击(函数(){ var name=$('#name ')).val()；var email=$('#email ').val()；var tel=$('#tel ').val()；var $ tr=$(' tr ' ' TD '名称'/TD ' ' TD '电子邮件'/TD ' ' TD '电话'/TD ' ' TDA href=' deleteEmp？id=' name ' '删除/a/TD ' '/tr ')；var $ table=$(' # user table ')；$ table。追加($ tr)；$tr.children().儿童()。单击(function(){ //alert($(domEle)).父项()。父项()。儿童(' :first ').text())；//方法1.//$(domEle).父项()。父项()。移除();//返回false//方法2.返回delete tr($ tr)；});//不能在这里给每个a加事件，每增加一次就每个一次，会重复弹出确认//$(“tr TD a”).每个（函数(index，domEle){//$(domEle)).click(function(){////alert($(domEle)).父项()。父项()。儿童(' :first ').text())；////方法1.////$(domEle).父项()。父项()。移除();////返回false///方法2.//返回deleteTr($(domEle).父项()。parent())；//});////});});函数删除tr(AoObject){ var flag=window。确认('您确定要删除aObject.children(':first ').' text()'名称的值吗？');//警报(标志);if(！flag){ return false；} else { AoObject。移除()；返回false}返回false} })/脚本/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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