jquery动态表格,动态添加表格行
时间: 2023-11-25 12:11:18 浏览: 35
可以通过以下步骤来动态添加表格行:
1. 给表格添加一个 id 或 class,方便后续的操作。
2. 使用 jQuery 的 append() 方法在表格末尾添加一行新的 tr 元素。
3. 使用 jQuery 的 html() 方法或 text() 方法来设置新行中的单元格内容。
例如,以下代码演示了如何在表格中添加一行新的数据:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
</table>
<button id="addRowBtn">添加一行数据</button>
<script>
$(function() {
$("#addRowBtn").click(function() {
var newRow = $("<tr></tr>");
newRow.append("<td>王五</td>");
newRow.append("<td>22</td>");
newRow.append("<td>男</td>");
$("#myTable tbody").append(newRow);
});
});
</script>
```
通过点击按钮,就可以在表格末尾添加一行新的数据。你可以根据自己的需求修改代码,比如可以根据用户输入的数据动态生成表格行。