使用jQuery在表格中添加<tr>
和rowspan
可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
append()
方法向表格中添加新的<tr>
行。例如,要在表格的<tbody>
中添加一行,可以使用以下代码:$('#myTable tbody').append('<tr><td>New Data 1</td><td>New Data 2</td></tr>');
rowspan
属性,可以使用jQuery的attr()
方法。例如,要将第一列的rowspan
设置为2,可以使用以下代码:$('#myTable tbody tr:last-child td:first-child').attr('rowspan', 2);
完整的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Add Row with rowspan</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#myTable tbody').append('<tr><td>New Data 1</td><td>New Data 2</td></tr>');
$('#myTable tbody tr:last-child td:first-child').attr('rowspan', 2);
});
</script>
</body>
</html>
这样,你就可以使用jQuery在表格中添加<tr>
和设置rowspan
属性了。请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云