Question

我想在JavaScript中统一两个tables。我这样做是因为一个表包含另一个表的标题。或者也许有其他方法可以这样做？

我有：

<table>
<tr>
  <td>ID</td>
  <td>Model</td>
  <td>Brand</td>
</tr>
</table>

和

<table>
<tr>
  <td>1</td>
  <td>BMW</td>
  <td>320</td>
</tr>
<tr>
  <td>2</td>
  <td>Audi</td>
  <td>A4</td>
</tr>
<tr>
  <td>3</td>
  <td>Some_kind_of_car</td>
  <td>Very_long_name_to_exist</td>
</tr>
</table>

表2中的列宽是由那里的输入文本的长度定义的。我需要它的标题长度与表一相同。

Answer 1

在javaScript中

var innerTable = document.getElementById('myTable');
var headerTable = document.getElementById('header');
var totalColumn = headerTable.rows[0].cells.length;

for (var i = 0; i < totalColumn; i++) {
    var innerTableWidth = innerTable.rows[0].cells[i].offsetWidth
    var headerTableWidth = headerTable.rows[0].cells[i].offsetWidth
    if (innerTableWidth < headerTableWidth)
    innerTable.rows[0].cells[i].width = headerTableWidth;
    else
    headerTable.rows[0].cells[i].width = innerTableWidth;

}

HTML

<table id="header">
    <tr>
        <td>ID</td>
        <td>Model</td>
        <td>Brand</td>
    </tr>
</table>
<table id="myTable">
    <tr>
        <td>1</td>
        <td>BMW</td>
        <td>320</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Audi</td>
        <td>A4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Some_kind_of_car</td>
        <td>Very_long_name_to_exist</td>
    </tr>
</table>

SEE DEMO HERE

Javascript中的HTML表格列宽统一

1 个答案: