el-tabel动态添加新增一行并保存行
时间: 2023-07-13 09:07:01 浏览: 81
要动态添加一行并保存行,您需要使用JavaScript和HTML来实现此功能。以下是一个简单的示例:
HTML代码:
```
<table id="myTable">
<tr>
<td>行1列1</td>
<td>行1列2</td>
</tr>
</table>
<button onclick="addRow()">添加行</button>
<button onclick="saveRow()">保存</button>
```
JavaScript代码:
```
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "新行列1";
cell2.innerHTML = "新行列2";
}
function saveRow() {
var table = document.getElementById("myTable");
var rows = table.rows;
var data = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].cells;
var rowData = [];
for (var j = 0; j < cells.length; j++) {
rowData.push(cells[j].innerHTML);
}
data.push(rowData);
}
// 将数据保存到后端
// ...
}
```
在addRow函数中,我们首先获取表格元素并使用insertRow方法添加一行。然后,我们在新行中使用insertCell方法添加两个单元格,并设置单元格内容。最后,在saveRow函数中,我们获取表格中所有行和单元格,将它们的内容存储在一个数组中,然后将数据发送到后端进行保存。
请注意,此示例仅演示了如何添加行和保存行,您可能需要根据您的具体需求进行修改和调整。