Home >Web Front-end >JS Tutorial >How to dynamically operate table rows with jquery (with code)

How to dynamically operate table rows with jquery (with code)

php中世界最好的语言Original: 2018-04-25 17:55:181512browse

This time I will bring you the method of dynamically operating table rows in jquery (with code). What are the precautions for dynamically operating table rows in jquery? Here is a practical case, let’s take a look.

<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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to dynamically operate table rows with jquery (with code)

Related articles