【LayUI】动态增减表单项，编号动态变化

需求描述：

商品发货多物流时。需要填写多个包裹信息。新增包裹信息框，包裹信息编号一次递增；删除包裹信息框，包裹信息编号动态变化

效果展示：

<div id="divOrderFh" style="display: none">
    <label class="layui-form-label" style="padding-left: 10px; margin-top: 10px">结算运费：</label>
    <div class="layui-input-inline">
        <input type="number" id="txtSettledFreight" value="0" oninput="divAlertInfoVue.checkInputNum(this.value)" class="jiesuan layui-input" style="height: 30px; margin-top: 10px">
    </div>
    <table id="tbContent" class="layui-table" lay-skin="nob" style="width: 90%; margin: 0px 20px; border-collapse: separate; border-spacing: 0px 20px;">
        <tbody>
            <tr>
                <td style="vertical-align: top"><label class="layui-form-label">包裹1：</label></td>
                <td>  
                    <div class="layui-input-block" style="margin-left: 0px">
                        <input type="text" name="txtExpressName" placeholder="请输入物流名称" class="layui-input">
                        <input type="text" name="txtExpressNumber" placeholder="请输入物流单号" class="layui-input">
                    </div> 
                </td> 
            </tr>
        </tbody>
    </table>
    <button type="button" class="layui-btn layui-btn-primary btn-add" onclick="divAlertInfoVue.CopyPackageControl()">+ 新增包裹</button>
</div>

<script type="text/javascript">
    //新增包裹控件
    CopyPackageControl: function () {
        var oTable = document.getElementById("tbContent");
        var index = oTable.rows.length;
        console.log(index)
        if (index > 9) {
            layer.msg('新增包裹不能超过10个！');
            return;
        } 
        var newRow = oTable.insertRow(index); 
        newRow.innerHTML = '   <tr>' +
                                    '<td style="vertical-align: top"><label class="layui-form-label">包裹' + parseInt(index + 1) + '：</label></td>' +
                                    '<td> ' +
                                        '<div class="layui-input-block" style="margin-left: 0px">' +
                                            '<input type="text" name="txtExpressName" placeholder="请输入物流名称" class="layui-input">' +
                                            '<span style="float: right; margin: -42px -12px; cursor: pointer" onclick="divAlertInfoVue.doRemoveDiv(event)"><i class="layui-icon layui-icon-close-fill" style="color: #999; font-size: 24px"></i></span>' +
                                            '<input type="text" name="txtExpressNumber" placeholder="请输入物流单号" class="layui-input">' +
                                        '</div> ' +
                                    '</td> ' +
                               '</tr>';

        newRow.className = "divItemSon"; 
    },

    //删除包裹控件
    doRemoveDiv: function (e) {
        var evt = e || event;
        var table = document.getElementById("tbContent");
        table.deleteRow(~~evt.target.parentNode.parentNode.rowIndex + 1);
        for (var i = 0; i < table.rows.length; i++) {
            if (i != 0) {
                var num = i + 1;
                table.rows[i].cells[0].innerHTML = '<label class="layui-form-label">包裹' + num + '：</label>';
            }
        } 
    },
</script>

如何理解var evt = e || event

为了实现多种浏览器兼容。event是事件对象(也是window的属性)，但不是标准的，只有IE支持

其实，如果把它写全的话，就好理解多了吧

function(event){
    var e = event ? event || window.event;
}

而 || 的两边是不能反过来写的。 ||返回第一个Boolean类型为true的值， 在IE中执行 var oEvent = ev || event; 时，ev为undefined，即为false，而event为true。所以返回的是它所支持的event。 在其他浏览器中，第一个ev为true，直接返回，不用理会后面的event。而反过来写，var oEvent = event || ev; IE下不会报错，直接返回第一个为true的event 但在其他浏览器中，event没有被定义，直接报错

如何理解的JS ~~运算符

简单一点就是将一些变量转化为Number（数字）类型的；

原文链接：https://blog.csdn.net/weixin_37710888/article/details/82587296