javascript - 将空 td 添加到 tds 少于 max 的行

Question

我从 Javascript 对象动态地将数据添加到表中。我有一个代码最终是这样的:

<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

即使 tds 不存在，我也希望每一行都有表格边框。所以基本上对于代码中的示例，我想要一个带边框的 3x3 表格。如果不在每一行中实际制作空的 tds，这可能吗？

Answer 1

您可以:

• 修改原JS，使其生成colspan属性( <td colspan="3"> 将与 3 个 <td> 一样宽；当然，您将失去网格对称性。
• 如果每个表格单元格都具有相同的固定宽度，则可以在表格上使用背景图像。
• 你可以结束a little script完成表格，cf:

var table = document.getElementsByTagName('table')[0];
function normalizeTable() {
    var trs = table.getElementsByTagName('tr'), 
        len = trs.length, max = 0, td;
    // first we search for the longest table row in terms of # of children 
    for (var i = len; i--;) {
        if (trs[i].children.length > max) 
            max = trs[i].children.length;
    }
    // now we can fill the other rows
    for (var j = len; j--;) {
        while (trs[j].children.length < max) {
            td = document.createElement('td');
            trs[j].appendChild(td);
        }
    }
}
normalizeTable();