Question

如何将带有水平标题的HTML表格转换为一个表格，其中每行包含一个包含两列的表格？

左侧的列将包含垂直标题，而右侧的列则包含相关值。

This fiddle显示原始表格和将显示的表格的示例。

看一下this couple of tables，预期的行为将包括将带有水平标题的表格转换成具有垂直标题的表格，但是注意这样一个事实：如果第一个表格有多个行，那么第二个表格也应该包含相同数量的行，但是由第一列中具有垂直标题的表和第二列中的对应值组成。

原始表：

<table id="tableid">
<thead>
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>Smith</td>
        <td>47</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>Jones</td>
        <td>38</td>
    </tr>
</tbody>

目标表：

<table id="tableid">
    <tr>
        <table>
            <tr>
                <th>Name</th>
                <td>John</td>
            </tr>
            <tr>
                <th>Surname</th>
                <td>Smith</td></tr>
            <tr>
                <th>Age</th>
                <td>47</td>
            </tr>
        </table>
    </tr>
    <tr>
        <table>
            <tr>
                <th>Name</th>
                <td>Bob</td>
            </tr>
            <tr>
                <th>Surname</th>
                <td>Jones</td></tr>
            <tr>
                <th>Age</th>
                <td>38</td>
            </tr>
        </table>
    </tr>
</table>

Answer 1

我希望这可能对你有所帮助，这实际上是将垂直表格反转为水平表格。

function inverse(){
  var t= document.getElementsByTagName('tbody')[0];
  r= t.getElementsByTagName('tr');
  cols= r.length; 
  rows= r[0].getElementsByTagName('td').length;
  let cell;
  let next;
  let tem;
  i= 0;
  tbod= document.createElement('tbody');

  while(i<rows){
    cell= 0;
    tem= document.createElement('tr');
    while(cell<cols){
        next= r[cell++].getElementsByTagName('td')[0];
        tem.appendChild(next);
    }
    tbod.appendChild(tem);
    ++i;
  }
  t.parentNode.replaceChild(tbod, t);
}

DOM：如何将表转换为每行2列表的表？

1 个答案: