将空 td 添加到 tds 小于最大值的行

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 表。这是否可能不实际在每行中制作空 td？

Answer 1

您可以：

• 修改原始 JS，使其生成 colspan 属性（<td colspan="3">宽达 3 个<td>;当然，您将失去网格对称性。
• 如果每个表格单元格具有相同的固定宽度，则可以在表格上使用背景图像。
• 您可以总结一个小脚本来完成表格，参见：

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();

Answer 2

已编辑

在我看来，您只需要添加一点 CSS 并插入所有 TD（空）：

table {
    border-style: solid;
    border-width: 1px;
    border-collapse: separate;
    empty-cells: show;
}
td {
    border-style: solid;
    border-width: 1px;
}

<table>
  <tr>
    <td>1</td>
    <td></td>  <!-- empty -->
    <td></td>  <!-- empty -->
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td></td>  <!-- empty -->
 </tr>
</table>