jsp如何动态新增删除行
时间: 2024-03-08 11:46:53 浏览: 14
在 JSP 中动态新增和删除行可以通过 JavaScript 和 DOM 操作来实现。以下是一个简单的示例:
假设我们有一个表格,其中有两个按钮:一个按钮用于新增行,另一个按钮用于删除行。
```
<table id="myTable">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<button onclick="deleteRow()">Delete Row</button>
```
然后,在 JavaScript 中定义 `addRow()` 和 `deleteRow()` 函数来实现新增和删除行的操作:
```
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "New row, column 1";
cell2.innerHTML = "New row, column 2";
}
function deleteRow() {
var table = document.getElementById("myTable");
if (table.rows.length > 1) {
table.deleteRow(table.rows.length - 1);
}
}
```
`addRow()` 函数中,我们首先获取到表格元素,然后使用 `insertRow()` 函数在表格末尾插入一行,再使用 `insertCell()` 函数在新插入的行中插入两个单元格,并为它们设置内容。
`deleteRow()` 函数中,我们首先获取到表格元素,然后判断表格中是否至少有两行。如果是,则使用 `deleteRow()` 函数删除表格末尾的一行。
通过这种方式,我们可以动态地新增和删除行。您可以根据需要将此代码嵌入到您的 JSP 页面中。