Question

我的表格如下。由于我无法改变HTML的创建方式，但我可以通过JavaScript添加一些我想解决的问题。

我想要的是：
（1）该表格获得额外的<thead>元素
（2）<tr>元素与firstline成为<thead>的孩子

<table>
  <tbody>
    <tr class= firstline > 
      <th> 1st column  </th>
      <th> 2nd column  </th>
    </tr>
    <tr class= content > 
      <th> foo  </th>
      <th> bat  </th>
    </tr>
  </tbody>
</table>

到目前为止，我设法删除了<tr class= firstline >元素，并设法在表格中添加<thead>元素。但我不知道如何将<tr class= firstline >插入<thead> ???

var firstLines = document.getElementsByClassName("firstline");
for (var i=0; i<firstLines.length; i++) {
        var FLparent = firstLines[i].parentNode.parentNode;
        var tbody    = document.createElement("thead")    ;
        FLparent.insertBefore(tbody, FLparent.firstChild); 
        FLparent.firstChild.appendChild(firstLines[i]);
        firstLines[i].parentNode.removeChild(firstLines[i]);
}

Answer 1

可能很简单：

var
  table = document.querySelector('table'),
  tHead = table.insertBefore(document.createElement('thead'), table.firstChild);

tHead.appendChild(
  table.querySelector('tr.firstline')
);

http://jsbin.com/ruza/3/

使用JavaScript移动节点

1 个答案: