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点击添加或者删除表格行代码示例》的代码，若要看代码效果请大家点击“运行代码”按钮。

[code]<!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>[/code]

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery点击添加或者删除表格行代码示例

Hi，您需要填写昵称和邮箱！