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

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?

Answers


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

you can use like

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

How about:

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

Or if it doesn't work:

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

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

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


Need Your Help

Express - Send a page AND custom data to the browser in a single request?

javascript html node.js http express

How simultaneously to render a page and transmit my custom data to browser. As i understood it needs to send two layers: first with template and second with JSON data. I want to handle this data by

Open links placed in different divs in one div with php

php html hyperlink

I've been looking at this for a few hours now and I've probably overlooked something silly, but I really can't get this to work.