Js实现表格的删除和添加效果

偏执的太偏执、 2022-05-14 03:25 244阅读 0赞

## 一、需要实现table 的行添加和删除功能。 ##

这个主要分为两块：

1、添加：

这个比较简单就是在指定的标签位置插入我们需要的HTML代码段。

2、删除：

删除的话，需要我们获取当前行的id，或者获取到当前行元素，然后将其remove掉。

## 二、实现步骤。 ##

1.   建立一个简单的HTML文件。

代码如下：

<!doctype html>
    <html>
    <head>
         <script type="text/javascript"     src="jquery-1.8.3.min.js"></script>
    	 <script type="text/javascript"     src="demo.js"></script>
    	 
    </head>
    <body>
    
    <div class="container">
        <div class="content">
            <h1 class="local_area">表格>添加删除</h1>
            </h1>
            
                <div class="search border main-search">
                    <h2 class="local_area" style="font-size: 16px;font-weight: lighter">Demo</h2>
                    <hr style="color:#2b82de;background-color: #2b82de ;size: 22px">
                    <table cellpadding="0" cellspacing="0" class="atable">
    
                        <tbody >
    
                            <tr id = "testA" style="width: 500px">
                                <td>
                                    <div class="s_one inputs_item" type="input">
                                        <label for="">td-1</label>
                                        <input type="text" class="inpt idNo"  id="" name=""/>
                               
                                    </div>
                                </td>
                                <td>
                                    <div class="s_one inputs_item" type="input">
                                        <label for="">td-2</label>
                                        <input type="text" class="inpt " id=""   name=""/>
                                    </div>
                                </td>
                                <td>
                                    <div class="s_one inputs_item" type="input">
                                        <label for="">td-3</label>
                                        <input type="text" class="inpt " id=""   name=""/>
                                    </div>
                                </td>
                                <td> 
                                </td>
                            </tr>
                            
    
                        </tbody>
                    </table>
    
                    
    
                   
                        <button class="s_btn add_btn" for="">新增</button>
                  
                     
                        <button   class="s_btn save_btn" for="">保存</button>
                     
                    
                </div>
             
            
            
        </div>
        
    </div>
    
    
    
     
    
     
    
     
    </body>
    </html>

2、创建一个demo.js文件

代码如下：

$(document).ready(function(){
             
            //
            //声明全局变量
                    
                     var formvalue = "";
                     var flag = 1;
                     var index=1;
           
            /*function deleteSelectedRow(rowID) {
                /!*if (confirm("确定删除该行吗？")) {
                    $("#" + rowID).remove();
                }*!/
                $("#" + rowID).remove();
            }*/
            //js函数用于点击时获取tr 的id 值将该tr 删除。
            //this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode) 这种删除方式比较直接
            $.extend({
                deleteSelectedRow:function deleteSelectedRow(rowID) {
                    $("#" + rowID).remove();
                }
            })
            //
            /*test_delete_btn 测试删除已经成功 save_btn*/
            $(".content").on("click", ".test_delete_btn", function () {
                deleteSelectedRow("testA");
            })
            $(".content").on("click", ".save_btn", function () {
                GetValue();
            })
            ///
            //-----------------获取表单中的值----start--------------
            function GetValue() {
                var value = "";
                $('.atable tr').each(function(i){                   // 遍历 tr
                           $(this).children('td').each(function(j){  // 遍历 tr 的各个 td
                               if(j==3){
                                   return ;
                               }
                               value += $(this).children().children().eq(1).val()+",";
                               //value += $(this).children().children().val() + "," //获取每个单元格里的第一个控件的值
                               //alert(value);
                               //  alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
                              });});
                value=value.substring(0,value.length-1);
                alert(value);
    
    
            }
            ///
            function insertNewRow() {
                //获取表格有多少行
                var rowLength = $(".atable>tbody").children("tr").length;
                //这里的rowId就是row加上标志位的组合。是每新增一行的tr的id。
                var rowId = "row" + flag;
    
                //每次往下标为flag+1的下面添加tr,因为append是往标签内追加。所以用after
                var insertStr = "<tr id=" + rowId + ">"
                    + "<td style='width: 20%'><div class='s_one inputs_item' type='input'><label for=''>td-1</label><input type='text' class='inpt '  name='idNo'/></div></td>"
                    + "<td style='width: 20%'><div class='s_one inputs_item' type='input'><label for=''>td-2</label><input type='text' class='inpt ' id=''   name=''/></div></td>"
                    + "<td style='width: 20%'><div class='s_one inputs_item' type='input'><label for=''>td-3</label><input type='text' class='inpt ' id=''   name=''/></div></td>"
                    + "<td><input type='button' class = 's_btn' name='delete' value='删除' style='width:80px'    onclick='$.deleteSelectedRow(\"" + rowId + "\")' />";
                    +"</tr>";
                /*$(".hotTable").append(tr);*/
                //这里的行数减2，是因为要减去底部的一行和顶部的一行，剩下的为开始要插入行的索引
                $(".atable tr:eq(" + (rowLength -1) + ")").after(insertStr); //将新拼接的一行插入到当前行的下面
                //为新添加的行里面的控件添加新的id属性。
                $("#" + rowId + " td:eq(0)").children().eq(0).children().eq(1).attr("id", "fundCode" + flag);
                $("#" + rowId + " td:eq(1)").children().eq(0).children().eq(1).attr("id", "fundName" + flag);
                $("#" + rowId + " td:eq(2)").children().eq(0).children().eq(1).attr("id", "productSort" + flag);
                //每插入一行，flag自增一次
                flag++;
            }
            //
            /**
             * [initEvent 事件绑定]
             * @return {[type]} [description]
             */
    
           
    
            // 添加行
            $(".content").on("click", ".add_btn", function () {
                var rowLength = $(".table>tbody").children("tr").length;
                insertNewRow();
                //alert(rowLength);
    
    
            })
    
    
        });

3、引入jquery文件 。

4、测试效果

未添加样式：

![70][]

![70 1][]

5、添加样式后：

![70 2][]

![70 3][]

6、这里主要说一下删除的做法。

1.  方法一 我是用在tr上添加id的方式 ，然后通过获取id的值删除当前行的。
2.  方法二使用
    
        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
    
    这种删除方式比较直接 ，直接的令人发指。

## 三、我还写了获取table中的值的方法 ##

通过GetValue()方法获取table中的所有值。

笔记留存已被后需！

--------------------

[70]: /images/20220514/091c1834dcc9438cb2b481a9951a55ad.png
[70 1]: /images/20220514/81efc601aa6f432d8925a8c6462d3fff.png
[70 2]: /images/20220514/86f4df5bb6094c9a80ca8dbddc692f11.png
[70 3]: /images/20220514/486b1970fdc04100b7592e5e41d0e2dd.png