How to replace in a Html `table`, the first `th` Html tag by `td` Html tag with JavaScript

Question

I am using jQuery-Visualize by Filament Group, Inc. which produces HTML5 canvas charts driven by HTML table elements.

A requirement of this plugin is, when using a multi-dimensional table, that the first th in the thead row tr needs to be a td.

My tables look like this:

<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>

But the plugin requires this, otherwise it adds an extra empty classification to the graph, which changes the graph layout:

<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>

I have an example on jsFiddle that demonstrates the issue.

How can I use Javascript/jQuery to change the table as described?

A `` element is a table header, you only really want that as your first row and `` for the rest. — PsychoMantis, Mar 06 '14 at 13:57
http://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery — udidu, Mar 06 '14 at 13:58
I display a chart below and his plugin follows a specific structure of html tag. — Jayce, Mar 06 '14 at 14:00
@Jayce for me it's a typical XY problem, you don't ask the right question: http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — A. Wolff, Mar 06 '14 at 14:03
`How do I do?` But why would you want to, and what did you try? — Xotic750, Mar 06 '14 at 14:11
@Xotic750 First, I displayed a chart with html table using javacript pugin like this [link]http://filamentgroup.com/examples/jqueryui-visualize/. He says you **How to use Visualize**. Now, I display with dataTables and I have to manually specify the td tag. — Jayce, Mar 06 '14 at 14:19
He is doing the opposite, he uses a header `TH` at the beginning of a row `TR` as a row header, which seems fair. I don't see the sense for your example? — Xotic750, Mar 06 '14 at 14:24
My example is for the thead tag, do you speak about the tbody tag? — Jayce, Mar 06 '14 at 14:28
Yes I was talking about in `tbody`. And the answer you accepted will change all of your row headers in `tbody` back into normal data cells, I don't think you want to do that, do you? But even in `theader` I don't see any need to change the `TH` to `TD`, perhaps better to add a `className` so that you can style it with CSS. — Xotic750, Mar 06 '14 at 14:31
No, it works well. I looked in the html code generated and everything is good. It changes just in 'thead' tag. '$('thead tr th:eq(0)')' means the first th tag no? — Jayce, Mar 06 '14 at 14:38
I have to change the first td in th otherwise it adds an element more in my chart and everything is shifted. — Jayce, Mar 06 '14 at 14:40
Ok, now with a little more detail, that seems to be the requirement for that `visualize` plugin. http://jsfiddle.net/Xotic750/hSEEG/ — Xotic750, Mar 06 '14 at 15:10

score 3 · Accepted Answer · answered Mar 06 '14 at 14:01

3

Try to use:

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

or easier to understand:

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

answered Mar 06 '14 at 14:01

Felix

37,892
8
43
55

score 1 · Answer 2 · answered Mar 06 '14 at 14:01

1

you can use like

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

answered Mar 06 '14 at 14:01

Anoop Joshi P

25,373
8
32
53

JuniorCoder · Answer 3 · 2014-03-06T14:02:15.770

0

You can achieve this by using jQuery. Try this code:

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

edited Mar 06 '14 at 14:02

answered Mar 06 '14 at 13:57

JuniorCoder

342
1
17

I would use `.html()` instead of `.text()` – lefoy Mar 06 '14 at 14:01

score 0 · Answer 4 · answered Mar 06 '14 at 13:59

0

How about:

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

Or if it doesn't work:

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

answered Mar 06 '14 at 13:59

adhie

274
1
9

you then get empty TD – A. Wolff Mar 06 '14 at 14:00

score 0 · Answer 5 · answered Mar 06 '14 at 14:10

try this way

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>');

LIVE DEMO:

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

EDIT:corrected the code to make it more precise towards the requirement

Happy Coding:)

How to replace in a Html `table`, the first `th` Html tag by `td` Html tag with JavaScript

5 Answers5