I have a string returned from an ajax call like this

<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>

Now I want to restructure this to

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr></thead>
<tbody>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>

How can I do this in jQuery?

The line below inserts a thead and copies the first tr into it

$(data.d).prepend("<thead></thead>").find("thead").html($(data.d).find("tr:eq(0)"))

I am trying to remove the first row in tbody after the previous line by using this line

$(data.d).find("tbody tr:eq(0)").remove()

How can I append thead,move first tr in tbody to it, replace all td inside that to th and finally remove the first tr from tbody

I have a string returned from an ajax call like this

<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>

Now I want to restructure this to

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr></thead>
<tbody>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>

How can I do this in jQuery?

The line below inserts a thead and copies the first tr into it

$(data.d).prepend("<thead></thead>").find("thead").html($(data.d).find("tr:eq(0)"))

I am trying to remove the first row in tbody after the previous line by using this line

$(data.d).find("tbody tr:eq(0)").remove()

How can I append thead,move first tr in tbody to it, replace all td inside that to th and finally remove the first tr from tbody

• javascript
• jquery
• html

5 Answers 5

Some step by step solution,

var jsonString = "<table><tbody><tr><td>Name</td><td>Age</td></tr><tr><td>Ron</td><td>28</td></tr></tbody></table>";
var t =$(jsonString); //jquery Table Object
var firstTR = $('tr:first',t); //geting firstTR
$('<thead></thead>')
  .prependTo(t)
  .append(
    $('td',firstTR).map(
       function(i,e){
         return $("<th>").html(e.textContent).get(0);
       }
    )
);

firstTR.remove();//removing First TR

$("#div").html(t);

//Output
console.log(t.html());

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
 
</div>

My proposal is:

• get the first row and for each cell create the corresponding th cell
• prepend to table body the table header, append the header cells created
• remove the first table body row

$(function () {
  var th = $('table tbody tr:first td').map(function(i, e) {
    return $('<th>').append(e.textContent).get(0);
  });
  $('table tbody').prepend($('<thead>').append(th)).find('tr:first').remove();
  console.log($('table').html());
});

<script src="https://code.jquery./jquery-1.12.4.min.js"></script>

<table>
    <tbody>
    <tr>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr>
        <td>Ron</td>
        <td>28</td>
    </tr>
    </tbody>
</table>

A much simpler solution:

t = $('table#tbl2')
firstTr = t.find('tr:first').remove()
firstTr.find('td').contents().unwrap().wrap('<th>')

t.prepend($('<thead></thead>').append(firstTr))

table thead tr th {
  background: green;
}
table tbody tr td {
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1"><tbody><tr><td>Name</td><td>Age</td></tr><tr><td>Ron</td><td>28</td></tr></tbody></table>
<br /><br />
<table id="tbl2"><tbody><tr><td>Name</td><td>Age</td></tr><tr><td>Ron</td><td>28</td></tr></tbody></table>

Here is the explanation of the code:

1. Remove the first tr element from the dom.
2. Find the td elements, take their contents() and unwrap the td.
3. Wrap each of the contents() of the td with th tag.
4. Add the <thead> tag to table and append the tr we worked on to the thead

You can make:

$('table').prepend('<thead></thead>'); // Add thead
$('table tr:eq(0)').prependTo('table thead'); // move first tr to thead
$('table thead').html(function(id, html) {  // you might use callback to set html in jquery
    return html.replace(/td>/g, 'th>'); // replace td by th
                       // use regExp to replace all
});

When you use .prependTo, this move the element to another in top and you might use callback in .html function in jquery.

Reference:

http://api.jquery./prependto/

http://api.jquery./appendto/

Years passed (so no jQuery anymore), and I want to do this and have solved it like this. The idea is 1) get the first row(<tr>), 2) replace every <td> tags on the first row to <th>.

const txt = `<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>`;

const el = document.createElement('table');
el.innerHTML = txt;

[...el.querySelector('tr').querySelectorAll('td')].forEach(td => 
  td.outerHTML = td.outerHTML
  .replace(/<td([^>]*)>/, '<th$1>')
  .replace(/<\/td>/, '</th>')
);

console.log(el.outerHTML);
/*
<table>
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>
*/