首页jsp, 在tr标签里加入一个列表,有a, b两列, 有增加行, 删除行按钮, 点击增加行会增加一个空行, 可以填写数据, 删除行可以删除选中的行

jsp, 在tr标签里加入一个列表,有a, b两列, 有增加行, 删除行按钮, 点击增加行会增加一个空行, 可以填写数据, 删除行可以删除选中的行

时间: 2023-09-29 19:09:55 浏览: 95

你可以使用JavaScript来实现在tr标签中添加一个带有a和b两列的列表，并且包含增加行和删除行的功能。以下是一个简单的示例代码： ```jsp <!DOCTYPE html> <html> <head> <title>动态添加行</title> </head> <body> <table id="myTable"> <tr> <th>列A</th> <th>列B</th> <th></th> </tr> </table> <button onclick="addRow()">增加行</button> <button onclick="deleteRow()">删除行</button> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); // 在表格末尾插入新行 var cell1 = row.insertCell(0); // 插入第一列 var cell2 = row.insertCell(1); // 插入第二列 var cell3 = row.insertCell(2); // 插入删除按钮列 cell1.innerHTML = '<input type="text" name="columnA">'; cell2.innerHTML = '<input type="text" name="columnB">'; cell3.innerHTML = '<input type="checkbox">'; } function deleteRow() { var table = document.getElementById("myTable"); var rowCount = table.rows.length; for (var i = rowCount - 1; i > 0; i--) { var row = table.rows[i]; var checkbox = row.cells[2].getElementsByTagName("input")[0]; if (checkbox.checked) { table.deleteRow(i); } } } </script> </body> </html> ``` 这段代码会在页面上创建一个包含a和b两列的表格。点击"增加行"按钮会在表格末尾插入一行，其中包含两个输入框用于填写数据，并且还有一个复选框用于选择要删除的行。点击"删除行"按钮会删除选中的行。你可以根据需要对这段代码进行调整和修改。

阅读全文