jQuery点击添加或者删除表格行代码示例

分享一段代码实例，它实现了点击添加或者删除表格行的功能。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery点击添加或者删除表格行代码示例-gaodaima.com</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  var show_count=20;
  var count=$("input:text").val();
  var fin_count=0;
  
  $("#btn_addtr").click(function(){
    fin_count=$("tr").length-1
    if(fin_count<show_count){
      $("tr:eq(1)").clone().appendTo("table");
      $("tr:last td input:first").val(++count);
    }
  });
});
function deltr(obj){
  var length=$("tr").length;
  if(length<=2){
    alert("至少保留一行");
  }
  else{
    $(arguments[0]).parent().parent().remove();
  }
}
</script>
</head>
<body>
<input type="button" id="btn_addtr" value="增行">
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
    <td align="center" bgcolor="#CCCCCC">用户名</td>
    <td align="center" bgcolor="#CCCCCC">类型</td>
    <td align="center" bgcolor="#CCCCCC">其他</td>
    <td></td>
  </tr>
  <tr>
    <td height="30" align="center"><input type="text" size="2" value="1" /></td>
    <td align="center"><input type="text" name="username" /></td>
    <td align="center"><select name="type">
        <option value="1">管理员</option>
        <option value="2">用户</option>
      </select></td>
    <td align="center"><input type="text" name="username2" /></td>
    <td><input type="button" value="删行"  onclick="deltr(this)" /></td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery点击添加或者删除表格行代码示例-gaodaima.com</title>

$(function(){

var show_count=20;

var count=$("input:text").val();

var fin_count=0;

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

fin_count=$("tr").length-1

if(fin_count<show_count){

$("tr:eq(1)").clone().appendTo("table");

$("tr:last td input:first").val(++count);

}

});

function deltr(obj){

var length=$("tr").length;

if(length<=2){

alert("至少保留一行");

}

else{

$(arguments[0]).parent().parent().remove();

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</select></td>

</tr>

</table>

</body>

</html>

点击对应按钮能够删除和或者添加行，下面介绍一下实现过程。

一.代码注释:

（1）.$(function(){})，当文档结构完全加载完毕之后再去执行函数中的代码。

（2）.var show_count=20，声明一个变量并赋值，用来规定最大的行数。

（3）.var count=$("input:text").val()，第一个文本框的value属性值，也就是第一个id值。

（4）.var fin_count=0，声明一个变量并赋初值为0。

（5）.$("#btn_addtr").click(function(){}），为添加按钮注册click事件处理函数。

（6）.fin_count=$("tr").length-1，将当前除去标题行之外的总行数赋值给变量fin_count。

（7）. if(fin_count<show_count)，判断当前的除去标题行的总行数是否小于规定的行数。

（8）.$("tr:eq(1)").clone().appendTo("table")，克隆第一行并将其追加到表格的尾部。

（9）.$("tr:last td input:first").val(++count);，设置行的id。

（10）.function deltr(obj){}，此函数用来删除一行，参数是传递的一个对象。

（11）.var length=$("tr").length，获取总行数。

（12）.if(length<=2){alert("至少保留一行")}，如果总行数小于等于2，则弹出提示。

（13）.$(arguments[0]).parent().parent().remove();，删除当前按钮父元素的父元素，也就是当前行。

特别注意:arguments[0]是函数传递的第一个参数，也就是按钮对象this。

本文案例为大家展示了《jQuery点击添加或者删除表格行代码示例》的代码，若要看代码效果请大家点击“运行代码”按钮。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery点击添加或者删除表格行代码示例-gaodaima.com</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){   var show_count=20;   var count=$("input:text").val();   var fin_count=0;      $("#btn_addtr").click(function(){     fin_count=$("tr").length-1     if(fin_count<show_count){       $("tr:eq(1)").clone().appendTo("table");       $("tr:last td input:first").val(++count);     }   }); }); function deltr(obj){   var length=$("tr").length;   if(length<=2){     alert("至少保留一行");   }   else{     $(arguments[0]).parent().parent().remove();   } } </script> </head> <body> <input type="button" id="btn_addtr" value="增行"> <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">   <tr>     <td height="30" align="center" bgcolor="#CCCCCC">ID</td>     <td align="center" bgcolor="#CCCCCC">用户名</td>     <td align="center" bgcolor="#CCCCCC">类型</td>     <td align="center" bgcolor="#CCCCCC">其他</td>     <td></td>   </tr>   <tr>     <td height="30" align="center"><input type="text" size="2" value="1" /></td>     <td align="center"><input type="text" name="username" /></td>     <td align="center"><select name="type">         <option value="1">管理员</option>         <option value="2">用户</option>       </select></td>     <td align="center"><input type="text" name="username2" /></td>     <td><input type="button" value="删行"  onclick="deltr(this)" /></td>   </tr> </table> </body> </html>

注意：如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章，转载请注明： 转载自搞代码

本文链接地址: jQuery点击添加或者删除表格行代码示例

分享到： QQ好友微信 QQ空间新浪微博印象笔记轻笔记有道云笔记