我有下面的 html 表格布局:
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td colspan="3">
<tr>
<td rowspan="3">Name</td>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</td>
</tr>
</tbody>
</table>
我想要这个带有 jquery 函数的布局,代码在这里: jquery
function createTable() {
var mytable = $('<table></table>').appendTo('body');
var thead = $('<thead></thead>').appendTo(mytable);
var row = $('<tr></tr>').appendTo(thead);
for (var j = 0; j < 3; j++) {
$('<th></th>').text(j).appendTo(row);
}
}
function addName() {
var CategoryRow = $('<tr></tr>').appendTo('table');
var col = $('<td></td>').attr({'colspan':3}).appendTo(CategoryRow);
var row = $('<tr></tr>').appendTo(col);
for (var j = 0; j < 3; j++) {
$('<td></td>').text('a'+j).appendTo(row);
}
$(row).find('td:eq(0)').text('name');
}
createTable();
addName();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
现在的问题是,当我使用 jquery 附加此布局时,colspan 表格单元格中的表格单元格宽度与表格标题不同
注意如果我保存动态生成表并运行,那么布局就可以了。
最佳答案
我已经通过替换 td > tbody 解决了这个问题。
使用这个html代码,我已经实现了我所需要的。
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td colspan="3">
<tbody>
<td rowspan="3">Name</td>
<td>foo</td>
<td>bar</td>
</tbody>
<tbody>
<td>1</td>
<td>2</td>
</tbody>
<tbody>
<td>1</td>
<td>2</td>
</tbody>
</td>
</tr>
</tbody>
</table>
关于javascript - 如何在 colspan td 中与 td 的 th 宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39636876/