Question

我使用jQuery-Visualize Filament Group, Inc.生成由HTML表格元素驱动的HTML5画布图表。

当使用多维表时，此插件的要求是th行thead中的第一个tr需要为td。< / p>

我的表格如下：

<table>
    <thead>
        <tr>
            <th>...</th> <!--This element-->
            <th>...</th>
            <th>...</th>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

但插件需要这个，否则它会为图形添加一个额外的空分类，这会改变图形布局：

<table>
    <thead>
        <tr>
            <td>...</td><!--Needs to be-->
            <th>...</th>
            <th>...</th>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

我在jsFiddle上有一个示例来说明问题。

如何使用Javascript / jQuery更改表格？

Answer 1

尝试使用：

$('tr th:eq(0)').replaceWith(function(){
    return $("<td />").append($(this).contents());
});

或更容易理解：

$('tr th:first').each(function() {
    $(this).replaceWith("<td>" + $(this).html() + "</td>");
});

Answer 2

你可以使用

 $(document).ready(function () {
        $("th:first").replaceWith("<td/>",{text:"....."});
    });

Answer 3

您可以使用jQuery实现此目的。试试这段代码：

$(document).ready(function () {
   $("tr:first-child th").each(function() {
      $(this).replaceWith('<td>' + $(this).html() + '</td>'); 
   });
});

Answer 4

怎么样：

$('tr>th').first().replaceWith('<td></td>');

如果它不起作用：

$('tr>th').first().replaceWith($('<td></td>'));

Answer 5

试试这种方式

HTML CODE：

     <table id="Tbl">
      <tr>
       <th>Hello</th>
       <th>...</th>
       <th>...</th>
       <th>...</th>
       <th>...</th>
       <th>...</th>
      </tr>
    </table>

JQUERY CODE：

    $('th:eq(0)').replaceWith('<td>'+$('th:eq(0)').html()+'</td>');

现场演示：

http://jsfiddle.net/dreamweiver/LPzs8/6/

编辑：更正了代码，使其更符合要求

快乐编码：）

如何在一个Html`table`中替换第一个带有JavaScript的`td` Html标签的第th个Html标签

5 个答案: