当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery动态增加删除表格行的小例子

jquery动态增加删除表格行的小例子

2019年03月19日  | 移动技术网IT编程  | 我要评论

jquery动态增加删除表格行代码如下:


<script src="jquery/jquery-1.3.1.js"></script>
<style type="text/css">
body{background:#ffffff;}
</style>
</head>
<body>
<script>
 $(function(){
 var show_count = 20;   //要显示的条数
 var count = $("input:text").val();    //递增的开始值，这里是你的id
 var fin_count = parseint(count) + (show_count-1);   //结束递增的条件
 

 

 $("#btn_addtr").click(function(){
 if(count < fin_count)    //点击时候，如果当前的数字小于递增结束的条件
 {
 $("tr:eq(1)").clone().appendto("table");   //在表格后面添加一行
 $("tr:last td input:first").val(++count);   //改变添加的行的id值。
 }
 });
 });

 function deltr(){
 var length=$("tr").length;
 if(length<=2){
 alert("至少保留一行");
 }else{
 $("tr:last").remove();
 }
 }
</script>
<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">username</td>
    <td align="center" bgcolor="#cccccc">usertype</td>
    <td align="center" bgcolor="#cccccc">other</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">administrator</option>
    <option value="2">guest</option>
      </select>
    </td>
    <td align="center"><input type="text" name="username2" /></td>
 <td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td>
  </tr>

</table>
</body>


您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网