如何用JavaScript将Html`table`中的第一个`th`Html标记替换为`td`Html标记

我正在使用它生成由HTML表元素驱动的HTML5画布图表

该插件的一个要求是，当使用多维表时，

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>

...
...
...
...
...
...
...
...
...
...
...
...
...

我举了一个例子来说明这个问题

---

如何使用Javascript/jQuery来更改所描述的表？

您可以使用jQuery来实现这一点。 请尝试以下代码：

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

$（文档）.ready（函数（）{
$（“tr:first child th”）。每个（函数（）{
$（this.replacetwith（“”+$（this.html（）+“”）；
});
});

您可以使用jQuery实现这一点。 请尝试以下代码：

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

$（文档）.ready（函数（）{
$（“tr:first child th”）。每个（函数（）{
$（this.replacetwith（“”+$（this.html（）+“”）；
});
});

那么：

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

$（'tr>th'）.first（）.replacetwith（“”）；

或者如果它不起作用：

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

$（'tr>th'）.first（）替换为（$（''）；

那么：

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

$（'tr>th'）.first（）.replacetwith（“”）；

或者如果它不起作用：

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

$（'tr>th'）.first（）替换为（$（''）；

尝试使用：

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

$（'tr th:eq（0）'）。替换为（函数（）{
返回$（“”）.append（$（this.contents（））；
});

或者更容易理解：

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

$（'tr th:first'）。每个（函数（）{
$（this.replace为（“+$（this.html（）+”）；
});

尝试使用：

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

$（'tr th:eq（0）'）。替换为（函数（）{
返回$（“”）.append（$（this.contents（））；
});

或者更容易理解：

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

$（'tr th:first'）。每个（函数（）{
$（this.replace为（“+$（this.html（）+”）；
});

您可以像

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

$（文档）.ready（函数（）{
$（“th:first”）.replace为（“，{text:“…”}）；
});

您可以像

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

$（文档）.ready（函数（）{
$（“th:first”）.replace为（“，{text:“…”}）；
});

试试这种方法

HTML代码：

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

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

你好
...
...
...
...
...

JQUERY代码：

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

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

$（'th:eq（0）'）。替换为（'+$（'th:eq（0）'））.html（）；

现场演示：

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

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

编辑：修改代码，使其更精确地符合要求

快乐编码：）

试试这种方法

HTML代码：

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

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

你好
...
...
...
...
...

JQUERY代码：

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

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

$（'th:eq（0）'）。替换为（'+$（'th:eq（0）'））.html（）；

现场演示：

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

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

编辑：修改代码，使其更精确地符合要求

---

快乐编码：）

一个

元素是一个表头，你只需要它作为你的第一行，其余的是

。我在下面显示了一个图表，他的插件遵循一个特定的html标记结构。@Jayce对我来说这是一个典型的XY问题，你没有问正确的问题：

我该怎么做？

但是你为什么想，你尝试了什么？一个

元素是一个表头，你只想把它作为你的第一行，剩下的是

。我在下面显示了一个图表，他的插件遵循一个特定的html标记结构。@Jayce对我来说这是一个典型的XY问题，你没有问正确的问题：

我该怎么做？

但是你为什么想，你尝试了什么？然后得到空的TDI然后得到空的TDI将使用

.html（）

而不是

.text（）

我将使用

.html（）

而不是

.text（）