【LayUI】添加、刪除input框，動態變化編號

<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