表格中几种删除和添加功能的实现

       刚进去一家公司，这两个月来时间都在修改现成的项目中，其中遇到了不少问题，太久没有写过代码，基础的东西基本都忘得差不多，又要重新开始了。

       在修改项目的过程种，遇到的最多就是各种各样的表格了，这里就写一下见到的几种表格里的添加和删除。

1.pop和push的添加与删除。

       pop()和push()都是数组中的方法，表格中的数据基本都来自各个数组，因为是要放出去给别人用的，所以表格中虽然有几条设置好的数据放着，但是更多的还是需要用户来自定义自己所需要的各种各样的数据，所以自定义数据的需求就很大，在表格中 ( 用数组遍历填充表格的时候 ) 最方便的添加和删除应该就是这两个方法了吧。

　　pop() 删除数组最后一项，push（）在数组的末尾添加一项。

  hstab_add(index) {
                    this.hsss2.push();
            },
            hstab_del(index) {   
                        this.hsss1.pop();
            },

　　方便快捷，一般来说我比较偏好于这种方法。当然要小心不要一下子把所有内容全部删完。。。我们可以加一个判断来解决这个问题，同样的添加也可以这么干（为什么要限制添加？这，我也不知道）

 add: function () {
                if (this.model.length>11) {
                    layer.alert("不能再添加")
                    return
                }
                this.model.push("");
            },
            // 删除自定义数据
            del: function () {
                if (this.model.length < 4) {
                    layer.alert("不能再删除")
                    return
                }
                this.model.pop();
            }

　　这样子的添加和删除只适用于一维数组循环的数据

       如果是二维数组的话就要麻烦一点，不能一句话解决了

 JXT3add: function (index) {
                this.phjf_arr[index].d.push("");
                this.phjf_arr[index].e.push("");
                this.phjf_arr[index].f.push("");
                this.phjf_arr[index].g.push("");
            },
            JXT3del: function (index) {
                if (this.phjf_arr[index].d.length == 1) {
                    layer.alert("不能再删除！", { icon: 2 });
                } else {
                    this.phjf_arr[index].d.pop();
                    this.phjf_arr[index].e.pop();
                    this.phjf_arr[index].f.pop();
                    this.phjf_arr[index].g.pop();
                }
            },

2.splice()

       这个同样是数组中的方法，因为pop()这一个方法已经满足不了我们的需求了，pop（）虽然好用但是它只能删除最后一项，在一些表格中是有特殊需求的，比如：我要实现多选然后一起删除选中项，或者就要删除掉数组中的某一项，这种时候pop（）就不适用了，

 JXT3del: function (index) {
                if (this.phjf_arr[index].d.length == 1) {
                    layer.alert("不能再删除！", { icon: 2 });
                } else {
                    this.phjf_arr[index].d.splice(this.phjf_arr[index].d.length - 1, 1);
                    this.phjf_arr[index].e.splice(this.phjf_arr[index].e.length - 1, 1);
                    this.phjf_arr[index].f.splice(this.phjf_arr[index].f.length - 1, 1);
                    this.phjf_arr[index].g.splice(this.phjf_arr[index].g.length - 1, 1);
                }
            },
index就是我们需要删除那一项的索引了，这样子就可以删除掉这一项了

 3.clone（）

　　这个就不是数组的方法了，在修改案例的过程中，我发现前辈在有些地方用了这个偷懒的方法，当初应该是没有什么问题的，但是当加了其他需求之后，克隆出来的行就出了一点问题，因为是克隆出来的，所以即使克隆的时候清空了数据也是没有用的，因为在表格内数据的时候这个克隆出来的单元格里面填的数据在一般情况下是无效的，对后来的计算造成了一定影响，但是，能放着不做么？当然不能，只能自己想办法搞定啦（重写又不想重写，只能修修补补过日子啦）

 这个问题最后解决方法为遍历每一个表格的内容各自计算，真的好麻烦昂

4.remove()

　　作为最最常用的删除指令，当然也是不能忘掉的，不过remove()清理的比较彻底，容易一下就把所有相同属性的都删除掉，在这种情况下就要用到另外一个指令:eq()来搭配使用。

<span id="before">1</span><input type="text" name="content" class="layui-input dabian inline" lay-verify="required">
             <span id="before">2</span><input type="text" name="content" class="layui-input dabian inline" lay-verify="required">
            <div style="display:flex;60px;margin:0 auto">
                <a class="layui-btn layui-btn-sm"  id="add">+</a>
                <a class="layui-btn layui-btn-sm layui-btn-danger" id="del">-</a>
            </div>

<script>

 $("#del").click(function () {
        var rowspan = $(this).parent().attr("rowspan") * 1;
        if ($(".dabian").length == 1) {
            var index = layer.alert("不能再减少了！", { icon: 7 }, function () {
                layer.close(index);
            });
        } else {
            i--;
            $(".dabian").eq(-1).remove();//批注一下这个eq(),eq()括号里的值为1时，为从第一项开始删除，-1时为从最后一项删除；为n时则删除n项，添加的时候也可以用这个指令
//括号中的值为必填项，在用eq来控制添加是也可用before，after来设定添加项的位置

            $("span").eq(-1).remove();
        }
    })
</script>

　　

暂时就写这几个了，其他的看到了再补上，因为这个项目已经结掉了

对了，在最后加上一个小东西，table表格序号自增

方式有很多，比如循环啊，echo啊什么的，但是用到时候就是容易想不起来】

那就留下一个吧

 <tr v-for="a,index in model">
                    <td width="50px" align="center">{{index}}</td>
</tr>

今天就这样啦，下班~