move first Tr to thead and replace td to th using jquery

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.com/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.com/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

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
 
</div>

Tags:

Javascript

Html

Jquery

Recent Posts