首页html页面，构建10行的表格，每一行有一个勾选项，点击按钮增加一行，点击删除按钮，删除选定的行

html页面，构建10行的表格，每一行有一个勾选项，点击按钮增加一行，点击删除按钮，删除选定的行

时间: 2024-10-03 20:01:31 浏览: 30

HTML表格可以利用`<table>`、`<tr>`、`<td>`以及`<input type="checkbox">`等元素来创建。以下是构建一个基本满足您需求的HTML结构示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>动态添加删除表格行</title> <style> table { width: 100%; border-collapse: collapse; } td { border: 1px solid #ccc; padding: 5px; } .add-row-btn, .delete-row-btn { margin-top: 10px; } </style> </head> <body> <button id="addRowBtn">添加一行</button> <button id="deleteRowBtn">删除选定行</button> <table id="dynamicTable"> <thead> <tr> <th>选择</th> <th>数据</th> </tr> </thead> <tbody>  <tr> <td><input type="checkbox" class="check-box"></td> <td>数据1</td> </tr> </tbody> </table> <script> // JavaScript 事件处理函数 document.getElementById('addRowBtn').addEventListener('click', function() { var newRow = document.createElement('tr'); newRow.innerHTML = '<td><input type="checkbox" class="check-box"></td><td>新数据</td>'; document.querySelector('#dynamicTable tbody').appendChild(newRow); }); document.getElementById('deleteRowBtn').addEventListener('click', function() { var checkboxes = document.querySelectorAll('#dynamicTable input[type="checkbox"]'); checkboxes.forEach(function(checkbox) { if (checkbox.checked) { checkbox.parentNode.removeChild(checkbox.parentNode); } }); }); </script> </body> </html> ``` 这个例子中，我们创建了一个按钮用于添加新行，另一个用于删除选中的行。每个表格行都有一个复选框供用户选择。JavaScript部分负责响应按钮点击事件，动态地添加和移除行。

阅读全文