动态表格增删功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34328582/article/details/69948917

本文介绍了一个使用jQuery实现的动态表格功能，该功能允许用户通过点击按钮来增加或删除表格行，并保持行内输入框内容的一致性。具体实现了表格行的动态添加和删除，同时确保了操作过程中序号的连续性和准确性。

   <body>

       <button id="questionRes">选择问题库</button>
       <input id="ques" name="ques" value="默认值" />
       <table id="tab" border="1" cellpadding="1" cellspacing="0" width="60%" align="center" style="margin-top:20px">
           <tr>
               <td width="20%">序号</td>
               <td>问题</td>
               <td>回答</td>
               <td>操作</td>
           </tr>
       </table>
       <div style="border:2px;
               border-color:#00CC00;
               margin-left:20%;
               margin-top:20px">
           <input type="button" id="but" value="增加" />
           </div>
   </body>
   <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script>
       $(document).ready(function() {
           //<tr/>居中
           $("#tab tr").attr("align", "center");

           //增加<tr/>
           $("#but").click(function() {
               var _len = $("#tab tr").length;
               $("#tab").append("<tr id=" + _len + " align='center'>" +
                   "<td>" + _len + "</td>" +
                   "<td><input type='text' value='212' name='question" + _len + "' id='question" + _len + " ' /></td>" +
                   "<td><input type='text' name='answer" + _len + "' id='answer" + _len + "' /></td>" +
                   "<td><a href=\'#\' onclick=\'deltr(" + _len + ")\'>删除</a></td>" +
                   "</tr>");
                   $("input[name='question"+_len+"']").val($("input[name='ques']").val());
           })

       })

       //删除<tr/>
       var deltr = function(index) {
           var _len = $("#tab tr").length;
           $("tr[id='" + index + "']").remove(); //删除当前行
           for(var i = index + 1, j = _len; i < j; i++) {
               var nextTxtVal = $("#desc" + i).val();
               $("tr[id=\'" + i + "\']")
                   .replaceWith("<tr id=" + (i - 1) + " align='center'>" +
                       "<td>" + (i - 1) + "</td>" + "<td>Dynamic TR" + (i - 1) + "</td>" +
                       "<td><input type='text' name='desc" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>" +
                       "<td><a href=\'#\' onclick=\'deltr(" + (i - 1) + ")\'>删除</a></td>" +
                       "</tr>");
           }

       }

   </script>

动态操作表格