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>一样宽;当然，您将失去网格对称性。< / LI>
如果您的表格单元格各自具有相同的固定宽度，则可以在表格中使用背景图像。
您可以结束a little script来完成表格，参见：

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

<强> EDITED

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

将空td添加到tds小于max的行中

2 个答案: