js新增多行表格页面错误

Question

点击打开弹窗多选数据，然后关闭弹窗回到原有页面，原有页面表格新增多行
现在回到原有页面后，数据添加正常，页面显示不正常。查看之后发现新增的那一行在tbody外。

 // 关闭弹窗
    confirmBtn.onclick = function () {
        let selectedIndices = [];
        for (let i = 0; i < multiSelect.options.length; i++) {
            if (multiSelect.options[i].selected) {
                selectedIndices.push(parseInt(multiSelect.options[i].value));
            }
        }
        let newRows = [];
        for (let index of selectedIndices) {
            let date = <?php echo json_encode($organizeMaterial);?>[index];
            let newRow = document.createElement('tr');
            let html = '<dev class="pes-option-line">';
            html += '<td><input type="checkbox" name="selectedRows[]" value="1"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="customer_material_name_' + index + '" placeholder="请输入" value="' + date.customer_material_name + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="customer_model_num_' + index + '" placeholder="请输入" value="' + date.customer_model_num + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="material_name_' + index + '" placeholder="请输入" value="' + date.material_name + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="material_code_' + index + '" placeholder="请输入" value="' + date.material_code + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="model_num_' + index + '" placeholder="请输入" value="' + date.model_num + '"></td>';
            html += '<td>';
            html += '<label style="text-align: left;">';
            html += '<input type="radio" name="can_show_' + index + '" value="0" ' + (date.can_show!== 1? 'checked="checked"' : '') + '> 可见';
            html += '</label><br>';
            html += '<label style="text-align: left;">';
            html += '<input type="radio" name="can_show_' + index + '" value="1" ' + (date.can_show === 1? 'checked="checked"' : '') + '> 不可见';
            html += '</label>';
            html += '</td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="requisition_' + index + '" placeholder="请输入" value="' + date.requisition + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="material_taker_' + index + '" placeholder="请输入" value="' + date.material_taker + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="purchase_channel_' + index + '" placeholder="请输入" value="' + date.purchase_channel + '"></td>';
            html += '<td><input class="form-text-input am-radius" type="text" name="warehouse_' + index + '" placeholder="请输入" value="' + date.warehouse + '"></td>';
            if (date.picture) {
                html += '<td><img style="height: 45px ;width: 35px;" src="' + date.picture + '"></td>';
            } else {
                html += '<td><div name="picture_' + index + '" data-am-webuploader-simple="{id:\'picture_' + index + '\', name:\'picture_' + index + '[]\',pick:{id:\'#picture_' + index + '\', multiple:true}}"></div></td>';
            }
            html += '</dev>';
            newRow.innerHTML = html;
            newRows.push(newRow);
        }
        let table = document.getElementById('mytable');
        for (let newRow of newRows) {
            table.appendChild(newRow);
        }
        modal.style.display = "none";
    }

Answer 1

在你的代码中，添加新行到表格的过程中，使用了 <dev> 标签，而实际上应该使用 <div> 或直接使用 <tr> 标签来创建表格行。因为 <dev> 并不是一个有效的 HTML 标签，可能导致你新增的行被插入到 <tbody> 外部，从而导致表格显示不正常。

以下是修正后的代码示例，将 <dev> 标签替换为 <tr> 和 <td> 标签，并确保新行的 HTML 结构正确：

confirmBtn.onclick = function () {
    let selectedIndices = [];
    for (let i = 0; i < multiSelect.options.length; i++) {
        if (multiSelect.options[i].selected) {
            selectedIndices.push(parseInt(multiSelect.options[i].value));
        }
    }
    let newRows = [];
    for (let index of selectedIndices) {
        let date = <?php echo json_encode($organizeMaterial);?>[index];
        let newRow = document.createElement('tr');
        
        let html = '<td><input type="checkbox" name="selectedRows[]" value="1"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="customer_material_name_' + index + '" placeholder="请输入" value="' + date.customer_material_name + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="customer_model_num_' + index + '" placeholder="请输入" value="' + date.customer_model_num + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="material_name_' + index + '" placeholder="请输入" value="' + date.material_name + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="material_code_' + index + '" placeholder="请输入" value="' + date.material_code + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="model_num_' + index + '" placeholder="请输入" value="' + date.model_num + '"></td>';
        html += '<td>';
        html += '<label style="text-align: left;">';
        html += '<input type="radio" name="can_show_' + index + '" value="0" ' + (date.can_show !== 1 ? 'checked="checked"' : '') + '> 可见';
        html += '</label><br>';
        html += '<label style="text-align: left;">';
        html += '<input type="radio" name="can_show_' + index + '" value="1" ' + (date.can_show === 1 ? 'checked="checked"' : '') + '> 不可见';
        html += '</label>';
        html += '</td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="requisition_' + index + '" placeholder="请输入" value="' + date.requisition + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="material_taker_' + index + '" placeholder="请输入" value="' + date.material_taker + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="purchase_channel_' + index + '" placeholder="请输入" value="' + date.purchase_channel + '"></td>';
        html += '<td><input class="form-text-input am-radius" type="text" name="warehouse_' + index + '" placeholder="请输入" value="' + date.warehouse + '"></td>';
        
        if (date.picture) {
            html += '<td><img style="height: 45px; width: 35px;" src="' + date.picture + '"></td>';
        } else {
            html += '<td><div name="picture_' + index + '" data-am-webuploader-simple="{id:\'picture_' + index + '\', name:\'picture_' + index + '[]\',pick:{id:\'#picture_' + index + '\', multiple:true}}"></div></td>';
        }

        newRow.innerHTML = html;
        newRows.push(newRow);
    }
    
    let table = document.getElementById('mytable').getElementsByTagName('tbody')[0];
    for (let newRow of newRows) {
        table.appendChild(newRow);
    }
    modal.style.display = "none";
}

主要修改点：

1. **使用 <tr> 和 <td>**：确保使用正确的标签来构建表格行和单元格。
2. **获取 <tbody>**：在获取表格时，直接定位到 <tbody>，确保新行被添加到正确的位置。