javascript - 如何用 JavaScript 替换 Html `table` 中的第一个 `th` Html 标签 `td` Html 标签

Question

我正在使用 jQuery-Visualize通过 Filament Group, Inc.生成由 HTML 表格元素驱动的 HTML5 Canvas 图表。

这个插件的一个要求是，当使用多维表时，thead行tr中的第一个th需要成为 td。

我的表格是这样的:

<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>");
});