觉得这个写的不错 就直接上了……
html
<body> <center> <table id="tb" border="1px" cellpadding="1px" cellspacing="0px"> <tr> <td colspan="3"> <input type="button" id="add" value="addRow" onclick="addRow()"> </td> </tr> </table> </center> </body>
js
<script type="text/javascript"> //实现增加行 function addRow(){ //获取当前表格的行数 (注意这里的初始值为1,因为addRow按纽是第一行,而第一行数据的编号也应该为1) //#tb 通过表格的id获取表格对象 再通过父子关系中的tr 来定位到tr对象 var tempRows = $("#tb tr").size(); var name = "felix"; //创建新的一行 $tr = $("<tr></tr>"); //创建新的一行的第一列,即第一个td,也就是行编号这个单元格(并设置id属性,为后面的删除操作中需要定位到具体哪一行做准备) $tdNum = $("<td id=\""+tempRows+"\"></td>"); //text()方法为jquery对象的文本内容赋值。 //第一次增加则第一行的编号为1,第二次增加的时候已经有两行了,所以tempRows的值为2,刚好第二行数据编号也应该为2 $tdNum.text(tempRows); //创建第二列,即第二个td,也就是名字这个单元格 $tdName = $("<td></td>"); $tdName.text(name); //创建第三列,即第三个td,也就是删除按钮这个单元格 $tdDelete = $("<td></td>"); //创建删除按钮 //在删除function中传入this关键字,即当前对象,也就是这一行的这一个删除按钮 $deleteButton = $("<input type='button' value='deleteRow' onclick='deleteRow(this)'>"); //将删除按钮添加到第三列,即第三个td(单元格)里面去 $tdDelete.append($deleteButton); //依次将三个td对象(行编号、名字、删除按钮)添加到tr对象里面去 $tr.append($tdNum); $tr.append($tdName); $tr.append($tdDelete); //最后将已经囊括了三个td对象的tr对象添加到表格里面去 $("#tb").append($tr); } //a代表需要传递的参数 function deleteRow(a){ //删除行 //通过传递过来的this关键字,即当前操作对象,定位到删除按钮, //再通过parent()定位到所在的td对象,进而再通过parent()定位到td对象所在的tr对象,最后将这个tr对象删除 $(a).parent().parent().remove(); //获取当前要删除的行的编号 //parent()定位到td对象,两次prev()依次定位到第二个td和第一个td, //最终text()获取第一个td的数据,即行编号 var rowNum = $(a).parent().prev().prev().text(); //获取总行数 //(注意是删除后的总行数,与下面for循环中的<=相对应,若在删除操作之前获取总行数,则在for循环应将结束循环的条件定义为i<temRows) var temRows = $("#tb tr").size(); //i=parseInt(rowNum)+1 : 从下一行(即被删除行的后面一行)开始逐行修改编号 //前面的行编号不动,但后面的编号需要减1 //pareseInt方法将字符串数据变为int类型 for(i=parseInt(rowNum)+1;i<=temRows;i++){ //通过id选择器获取到具体的哪一行的第一列,并将第一列,即行编号这个单元格中的数据减1 $("#"+i).text(i-1); //同时通过attr("属性名",属性值)方法将其id属性也减1 $("#"+i).attr("id",i-1); } } </script>
相关推荐
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
jquery对表格行操作,增删,只是多选删除。
使用Jquery实现表格的增删改的动画效果,使用bootstrap构建的界面
jQuery实现表格的增加、修改、删除、保存代码
纯Jquery表格全选+反选+增删查找,一个简陋版本,仅供参考,细节处理不周到处请评论,后期有空修改
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考,具体如下: 这里实现的是在jQuery中通过按钮的形式,对表格进行的一些基本操作,可以实现表格的增删改操作,并实现对鼠标事件监听,实现表格...
如何使用jquery固定表格行列,固定table表头。
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
JQuery 实现表格的增删查和光棒效果 Jquery添加一行,可以查询,可以选中一行删除 还有选中光棒效果哟
1.GridView如何新增一行数据 2.jQuery实现对数据的增删改查
动态表格,功能为点击添加按钮,表格增加一行并给其name属性赋予的值,点击删除,自动删除这一行,具体实现如下
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
jQuery表格增加删除代码基于jquery1.7.js制作,单元格增行删行代码。
主要为大家详细介绍了jQuery对table表格进行增删改查操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
借助bootstrap框架完成的一个简单的jquery表格增删改查内容,适合学习。借助bootstrap框架完成的一个简单的jquery表格增删改查内容,适合学习。
jquery操作表格增加删除
jQuery实现表格行的动态增加与删除(改进版)
jquery表格增行,删行处理
NULL 博文链接:https://busing.iteye.com/blog/684127