js实现弹窗输入table表格信息4

在JavaScript中，可以使用`<dialog>`元素或者第三方库（如jQuery UI Dialog、SweetAlert等）来实现弹窗输入表格数据的功能。这里我提供一个基本的示例，假设我们有一个包含表格数据的数组，用户可以在弹窗中编辑这个数组的一个条目。

首先，创建一个表格结构，并隐藏起来：

<table id="data-table">
    <!-- 表格内容由 JavaScript 动态生成 -->
</table>

<!-- 弹出框用于编辑 -->
<button onclick="openDialog()">编辑</button>

<!-- 隐藏的弹窗内容 -->
<dialog id="edit-dialog" style="display:none;">
    <form>
        <label for="itemCode">物料编码:</label>
        <input type="text" id="itemCode" required>
        <br>
        <label for="itemName">物料名称:</label>
        <input type="text" id="itemName" required>
        <!-- 添加更多表单项... -->
    </form>
    <button onclick="saveChanges()">保存</button>
</dialog>

接下来，编写JavaScript来处理弹窗的打开、关闭以及数据的保存：

let data = [
    { itemCode: "001", itemName: "物品1" },
    { itemCode: "002", itemName: "物品2" }
]; // 示例数据

// 生成初始表格内容
function generateTable() {
    let table = document.getElementById('data-table');
    data.forEach(item => {
        let row = `<tr><td>${item.itemCode}</td><td>${item.itemName}</td></tr>`;
        table.insertAdjacentHTML('beforeend', row);
    });
}

generateTable();

function openDialog(index = null) {
    if (index !== null) {
        const item = data[index];
        document.getElementById('itemCode').value = item.itemCode;
        document.getElementById('itemName').value = item.itemName;
    }
    document.getElementById('edit-dialog').showModal();
}

function saveChanges() {
    const itemCode = document.getElementById('itemCode').value;
    const itemName = document.getElementById('itemName').value;
    
    // 根据输入更新数据，这里仅做展示，实际应用中替换为数据库操作或数组更新
    data[document.activeElement.dataset.rowIndex] = { itemCode, itemName };
    closeDialog();
    updateTable();
}

function closeDialog() {
    document.getElementById('edit-dialog').close();
}

function updateTable() {
    generateTable(); // 更新表格显示最新的数据
}

// 当表格行点击时，打开编辑对话框
document.querySelectorAll('#data-table tr').forEach((row, index) => {
    row.addEventListener('click', function(e) {
        e.preventDefault();
        openDialog(index);
    }, false);
});

在这个例子中，用户点击表格中的行会打开弹窗，允许他们编辑相应的物料编码和名称。点击“保存”按钮时，数据会被更新，表格会自动刷新显示新的内容。