Question

我需要在TABLE标记内找到DIV并对标题执行修改。可用的报告工具不允许识别生成的表，但允许脚本和DIV插入。

考虑下表，其中标题是第一行：

<div id="ScrollHeader">
  <table>
    <tr>
      <td>Browser</td>
      <td>Visits</td>
      <td>Pages/Visit</td>
      <td>Avg. Time on Site</td>
      <td>% New Visits</td>
      <td>Bounce Rate</td>
      <td>Avg. Time on Site</td>
      <td>% New Visits</td>
      <td>Bounce Rate</td>
    </tr>
    <tr>
      <td>Firefox first</td>
      <td>1,990</td>
      <td>3.11</td>
      <td>00:04:22</td>
      <td>70.00%</td>
      <td>32.61%</td>
      <td>00:04:22</td>
      <td>70.00%</td>
      <td>32.61%</td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td>1,990</td>
      <td>3.11</td>
      <td>00:04:22 test test test</td>
      <td>70.00%</td>
      <td>32.61%</td>
      <td>00:04:22</td>
      <td>70.00%</td>
      <td>32.61%</td>
    </tr>
  </table>
</div>

我需要一个JavaScript或jQuery代码来将表转换为以下内容：

<div id="ScrollHeader">
  <table>
    <thead>
      <tr>
        <th>Browser</th>
        <th>Visits</th>
        <th>Pages/Visit</th>
        <th>Avg. Time on Site</th>
        <th>% New Visits</th>
        <th>Bounce Rate</th>
        <th>Avg. Time on Site</th>
        <th>% New Visits</th>
        <th>Bounce Rate</th>
      </tr>
    </thead>
    <tr>
      <td>Firefox first</td>
      <td class="numeric">1,990</td>
      <td class="numeric">3.11</td>
      <td class="numeric">00:04:22</td>
      <td class="numeric">70.00%</td>
      <td class="numeric">32.61%</td>
      <td class="numeric">00:04:22</td>
      <td class="numeric">70.00%</td>
      <td class="numeric">32.61%</td>
    </tr>
  </table>
</div>

代码需要在<div id="ScrollHeader">中标识表格，在第一个THEAD之前插入TR，在第一行中将TD更改为TH，用</thead>关闭它。

我尝试使用$("div p[id^='ScrollHeader']").length查找DIV和$("tr:first")以执行<table>.prepend(document.createElement('thead'));但未成功。

Answer 1

试试这个：

$('#ScrollHeader table tr:eq(0)').wrap('<thead />');
$('#ScrollHeader table tr:eq(0) td').each(function () {
    $('#ScrollHeader table tr:eq(0)').append($('<th />').html($(this).html()));
    $(this).remove();
});

Answer 2

$('#ScrollHeader tr:first')
    .wrap('<thead />')
    .children().each(function(){
        text = $(this).text();
        $(this).replaceWith('<th>'+text+'</th>');
    });
$('#ScrollHeader thead').insertBefore('#ScrollHeader tbody');

你可以看到它正常工作here

jQuery或JS转换动态HTML表

2 个答案: