表格增行，删行处理(jquery)

最新推荐文章于 2021-08-12 16:17:13 发布

阿聪世家

最新推荐文章于 2021-08-12 16:17:13 发布

阅读量1.4k

点赞数

分类专栏：网站常用jquery效果 jquery学习表单类问题

本文链接：https://blog.csdn.net/congcong875/article/details/8700936

版权

网站常用jquery效果同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

jquery学习

32 篇文章 0 订阅

订阅专栏

表单类问题

9 篇文章 0 订阅

订阅专栏

在做后台中遇到的情况，分享下

<!DOCTYPE html>
<html>
<head>
<title>表格增行，删行处理</title>
<script type="text/javascript" src="http://jt.875.cn/js/jquery"></script>   
</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>   
<div style="background:#ccc;">
    <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" οnclick="deltr()" value="删行"></td>   
</div>
  </tr>   
  
</table>   
</body>  
</html>