原生 JS 与 ECMA 高级语法：实现表格添加与删除行及时间处理功能

好的，下面是一个使用原生JavaScript和ECMAScript高级语法实现的简单表格操作示例。这个示例包括添加行、删除行以及处理时间的功能。首先，我们假设有一个HTML文件，其中包含一个表格和一个按钮用于添加新行： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Operations</title> </head> <body> <table id="dataTable" border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Date</th> <th>Actions</th> </tr> </thead> <tbody>  </tbody> </table> <button id="addRowBtn">Add Row</button> <script src="lib/dayjs.min.js"></script> <script src="script.js"></script> </body> </html> ``` 接下来是`script.js`文件的内容： ```javascript document.addEventListener('DOMContentLoaded', () => { const tableBody = document.querySelector('#dataTable tbody'); const addRowBtn = document.getElementById('addRowBtn'); let rowId = 1; // Starting ID for new rows // Function to create a new row const createRow = (id, name, date) => { const tr = document.createElement('tr'); tr.innerHTML = ` <td>${id}</td> <td>${name}</td> <td>${date}</td> <td><button class="deleteBtn">Delete</button></td> `; return tr; }; // Function to handle adding a new row const addRow = () => { const name = prompt('Enter name:'); if (!name) return; // If no name is entered, do nothing const date = dayjs().format('YYYY-MM-DD HH:mm:ss'); // Using dayjs to format the date const newRow = createRow(rowId++, name, date); tableBody.appendChild(newRow); }; // Event listener for the "Add Row" button addRowBtn.addEventListener('click', addRow); // Event delegation for delete buttons within the table body tableBody.addEventListener('click', (event) => { if (event.target.classList.contains('deleteBtn')) { if (confirm('Are you sure you want to delete this row?')) { const row = event.target.closest('tr'); tableBody.removeChild(row); } } }); }); ``` 解释： 1. HTML部分： - 创建了一个表格，包含表头和空的表体。 - 添加了一个按钮用于触发添加新行的操作。 - 引入了`dayjs`库来处理日期格式化。 - 引入了外部的`script.js`文件来编写JavaScript逻辑。 2. JavaScript部分： - 使用`DOMContentLoaded`事件确保在DOM完全加载后执行脚本。 - 定义了一些变量，如`tableBody`（表体元素）、`addRowBtn`（添加按钮）和`rowId`（行ID）。 - `createRow`函数用于创建新的表格行，并返回该行元素。 - `addRow`函数用于处理添加新行的逻辑，包括获取用户输入的名称和使用`dayjs`格式化当前日期。 - 为“Add Row”按钮添加点击事件监听器，当按钮被点击时调用`addRow`函数。 - 使用事件委托在表体上监听删除按钮的点击事件，如果确认删除则移除对应的行。这样，你就可以通过点击“Add Row”按钮来动态添加新行，并通过点击“Delete”按钮来删除相应的行。 ######[AI写代码神器 | 1003点数解答 | 2024-11-12 15:33:09]

服务商

更多选项

快捷项

自定义