Javascript将第一行放在thead中

时间:2014-05-13 12:01:00

标签: javascript html css

是否可以使用javascript将第一行移动到<thead>标记中?

<table id="TBL1399802283490" class="confluenceTable">
  <tbody>
    <tr>
      <th class="confluenceTh" style="cursor: pointer;">Server Name  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status  </th>
    </tr>
    <tr>
      <td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> READY </div>  </td>        
    </tr>
  </tbody>
</table>

哪个成为

<table id="TBL1399802283490" class="confluenceTable">
  <thead>
      <tr>
      <th class="confluenceTh" style="cursor: pointer;">Server Name  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status  </th>
    </tr>
  </thead>
  <tbody>        
    <tr>
      <td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> READY </div>  </td>        
    </tr>
  </tbody>
</table>

我对Javascript不太熟悉,所以非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

这应该适用于您的代码中给出的表格,对于一般表格来说,以更安全的方式获取元素会更好。

var table = document.getElementById('TBL1399802283490');
var thead = document.createElement('THEAD');
var tbody = table.getElementsByTagName('TBODY')[0];
var tr = table.getElementsByTagName('TR')[0];

table.appendChild(thead);
tbody.removeChild(tr);
thead.appendChild(tr);