如何将弹窗文本框的值传入待办事项表格以新增行？

我在网页上搭建了供图书馆员工使用的待办事项表格，员工可在其中记录任务内容及备注，表格效果如下：

表格代码：

</div>
            <table id="myTable" class="display table-auto">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Note</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>To Clean Booksheleves</td>
                        <td>On 20th November</td>
                        <td><button class="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                Delete
                            </button></td>
                    </tr>
                    <tr>
                        <td>To Prepare Books Based on Category</td>
                        <td>on 25th November</td>
                        <td><button class="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                Delete
                            </button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

页面设有“Add”按钮，点击弹出弹窗可输入新任务名称与备注，弹窗代码如下：

弹窗HTML & CSS： #

<button style="background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8;
            position: fixed; bottom: 23px; right: 28px; width: 280px;" onclick="Popup()">Add</button>
        <div style="display: none; position: fixed;bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9;" id="myForm">
        <form action="/action_page.php" style="max-width: 300px; padding: 10px; background-color: white;">
            <h1>Add Tasks</h1>

            <label for="name"><b>Name</b></label>
            <input type="text" placeholder="Enter Your New Tasks" name="task" required id="taskInput">
            <input type="text" placeholder="Enter Notes" name="note" id="noteInput">

            <button type="button" style="background-color: #04AA6D; color: white; padding: 16px 20px; border: none; cursor: pointer;
            width: 100%; margin-bottom:10px; opacity: 0.8;" onclick="addTask()">Add Task</button>
            <button type="button" style=" background-color: red;" onclick="closePopup()">Close</button>
        </form>

弹窗脚本： #

<script>
        function Popup() {
            document.getElementById("myForm").style.display = "block";
        }
        function closePopup() {
             document.getElementById("myForm").style.display = "none";
        }
        
    </script>

现在需要实现：点击弹窗的添加按钮，将输入的任务名称和备注添加到表格中，同时清空输入框并关闭弹窗。

实现步骤： #

1. 给弹窗输入框添加ID #

为弹窗里的两个输入框添加唯一ID，方便JavaScript获取输入值：

<input type="text" placeholder="Enter Your New Tasks" name="task" required id="taskInput">
<input type="text" placeholder="Enter Notes" name="note" id="noteInput">

2. 修改弹窗提交按钮 #

把原表单的submit类型按钮改为button类型，同时修改按钮文字为“Add Task”并绑定添加任务的函数：

<button type="button" style="background-color: #04AA6D; color: white; padding: 16px 20px; border: none; cursor: pointer;
width: 100%; margin-bottom:10px; opacity: 0.8;" onclick="addTask()">Add Task</button>

3. 修复弹窗关闭函数的拼写错误 #

原弹窗按钮绑定的函数是closePopUp()，但脚本里定义的是closePopup()，统一改为closePopup()：

<button type="button" style=" background-color: red;" onclick="closePopup()">Close</button>

4. 添加addTask()核心函数 #

在原有脚本中添加如下函数，完成获取输入值、创建表格新行、添加内容、清空输入框和关闭弹窗的逻辑：

function addTask() {
    // 获取输入框的值并去除首尾空格
    const taskName = document.getElementById('taskInput').value.trim();
    const taskNote = document.getElementById('noteInput').value.trim();

    // 验证任务名称不能为空
    if (!taskName) {
        alert('请输入任务名称');
        return;
    }

    // 获取表格的tbody元素
    const tableBody = document.querySelector('#myTable tbody');

    // 创建新的表格行
    const newRow = document.createElement('tr');

    // 创建任务名称单元格并赋值
    const taskCell = document.createElement('td');
    taskCell.textContent = taskName;

    // 创建备注单元格，为空时显示“无备注”
    const noteCell = document.createElement('td');
    noteCell.textContent = taskNote || '无备注';

    // 创建操作列单元格，包含删除按钮
    const actionCell = document.createElement('td');
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
    deleteBtn.textContent = 'Delete';
    // 绑定删除行事件
    deleteBtn.onclick = function() {
        newRow.remove();
    };
    actionCell.appendChild(deleteBtn);

    // 将单元格添加到新行，再将新行添加到表格
    newRow.appendChild(taskCell);
    newRow.appendChild(noteCell);
    newRow.appendChild(actionCell);
    tableBody.appendChild(newRow);

    // 清空输入框
    document.getElementById('taskInput').value = '';
    document.getElementById('noteInput').value = '';

    // 关闭弹窗
    closePopup();
}

修改后的完整脚本：

<script>
function Popup() {
    document.getElementById("myForm").style.display = "block";
}
function closePopup() {
     document.getElementById("myForm").style.display = "none";
}
function addTask() {
    const taskName = document.getElementById('taskInput').value.trim();
    const taskNote = document.getElementById('noteInput').value.trim();

    if (!taskName) {
        alert('请输入任务名称');
        return;
    }

    const tableBody = document.querySelector('#myTable tbody');
    const newRow = document.createElement('tr');

    const taskCell = document.createElement('td');
    taskCell.textContent = taskName;

    const noteCell = document.createElement('td');
    noteCell.textContent = taskNote || '无备注';

    const actionCell = document.createElement('td');
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = function() {
        newRow.remove();
    };
    actionCell.appendChild(deleteBtn);

    newRow.appendChild(taskCell);
    newRow.appendChild(noteCell);
    newRow.appendChild(actionCell);
    tableBody.appendChild(newRow);

    document.getElementById('taskInput').value = '';
    document.getElementById('noteInput').value = '';
    closePopup();
}
</script>

完成修改后，员工点击Add按钮弹出弹窗，输入任务名称和备注后点击Add Task，即可将新任务添加到表格中，新添加的任务也带有删除功能，点击Delete按钮可删除对应行。

内容的提问来源于stack exchange，提问作者Alice