Develop Reference

Applying CSS class to all rows but not the table heading

I am trying to apply a css style to change color of clicked rows of an HTML table. On the click event, I am adding the class (selected-row). Now, my table has a sorting functionality when clicking on the heading of each column. The heading gets colored which is not what I want. I want only rows but not the heading. So, I changed my style to (not first child). Now, the heading AND first row don't get color changed. I need only the heading to NOT change color and all other rows to change color when I add selected-row class.
.selected-row:not(:first-child) {
background-color: brown;
color: #FFF;
}
$("#example tr").click(function () {
$(this).addClass('selected-row').siblings().removeClass('selected-row');
});

If you mark up your table with a <thead> to contain the header row, and <tbody> to contain the data rows, you can specifically target only rows in the table body - like this in CSS:
tbody > tr { }
And like this in jQuery:
$('#example tbody > tr')...
Table mark-up:
<table>
<caption>This table contains...</caption>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$50</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Item 1</td>
<td>$20</td>
</tr>
<tr>
<td>Item 2</td>
<td>$30</td>
</tr>
</tbody>
</table>

One way to potentially do it would be to wrap your table header in <thead></thead> and body in <tbody></tbody> and then apply whatever selector as
$("#example tbody tr").click(function () {...});

You can target "td" tags:
$("#example tr td").click(function () {
$(this).parent().addClass('selectedrow').siblings().removeClass('selected-row');
If you are using "th" tags in your table:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

If you don't want to modify your header using the th or tbody tags, you could do something like this.
$("table tr:gt(0)").click(function(){
$(this).siblings().removeClass('selected-row');
$(this).addClass('selected-row');
})
You can see this working in this jsfiddle

Use th for the header row element.

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

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

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>

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:
Remove the first tr element from the dom.
Find the td elements, take their contents() and unwrap the td.
Wrap each of the contents() of the td with th tag.
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.com/prependto/
http://api.jquery.com/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>
*/

how to get first table row "<td></td>" text which are visible using jquery

Here I have a table
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr style="display:none">
<td>jones</td>
<td>.net</td>
</tr>
<tr style="display:none">
<td>James</td>
<td>SAP</td>
</tr>
<tr>
<td>Charles</td>
<td>Java</td>
</tr>
</tbody>
</table>
I want to get text of first row first td text which are visible using jquery, by
above table, I want result as "Charles".
How can get it. I have tried like
$("#table").closest('tbody').children('tr:first').find('td:first').text()
but not getting result.how can I?

Try to use :visible selector to get the visible rows,
$("#table tbody tr:visible:first td:first").text()

To get the visible one use the according :visible selector that jquery ships:
$('#table > tbody > tr:visible:first > td:first').text();

This is Worked for Me.
$('#table> tbody > tr:visible').first().find('td').first().text();

Add row to the beginning of a table - JavaScript - jQuery

What is the best method in jQuery to add an additional row to a table as the first row?
I have a table like this
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
<button id="but">mybutton</button>
I want to add a row as the first row to the beginning of the table with given default values. How can I accomplish this using JavaScript and jQuery? A fiddle will be helpful.

You can use .prepend function in jQuery.
$('#mytable').prepend($('<tr>'));
http://api.jquery.com/prepend/

http://jsfiddle.net/32Ymw/
$("#but").click(function(){
row = $("<tr></tr>");
col1 = $("<td>col1</td>");
col2 = $("<td>col2</td>");
col3 = $("<td>col3</td>");
row.append(col1,col2,col3).prependTo("#mytable");
});​

Using .on('click',...); and prepend:
http://jsfiddle.net/k8hCa/
jQuery:
$('#but').on('click', function(e){
$('#mytable').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

The accepted answer is good, but it is definitely worth noting that the tbody is the node you should append/prepend to, and using the appendTo and prependTo methods is the best solution as it will work when there are any number of rows, including zero.
See this answer for a good example: https://stackoverflow.com/a/1353736/2812428
Note also that it is good practice to specify a tbody yourself, even if there are no rows, to avoid the issue that there would be no tbody automatically in the DOM in the case that there were no rows added to the table.

The jQuery .prepend() method should work
$('#mytable').prepend($('<tr>'));

Folloing is what I am doing
Template
<script type="text/template" id="cardTemplate">
<TR class=Normal>
<TD>
{0}
</TD>
<TD>
{1}
</TD>
<TD>
{2}
</TD>
</TR>
</script>
jQuery
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
var cardTemplate = $("#cardTemplate").html();
//Note: format is a custom method added for "String"
var template = cardTemplate.format("a", "b","c");
//$('#tblScanResult tbody > tr:first').before(template);
$('#tblScanResult tbody').prepend(template);

This question is really ancient but just for the sake of completeness, if you have headers, you can easily modify Alex answer to insert at the top of the body rows but after the headers rows thusly...
<table id="mytable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</tbody>
</table>
<button id="but">mybutton</button>
$('#but').on('click', function(e){
$('#mytable > tbody').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

jQuery tablesorter sort by column id instead of column number

I have an HTML table that I'm sorting with jQuery tablesorter. I have an external link that sorts the table by name using JavaScript. Within that JavaScript function though, I have to say sort by column 0 instead of just saying sort by the name column.
How can I modify what I have below so I don't have to remember that name is column 0 in JavaScript?
$('document').ready(function(){
$('table#classes_table').tablesorter();
$("#sort-link").click(function() {
//How can I say something like sort by "Name" instead of having to remember name is column 0
var sorting = [[0,0]
$("table").trigger("sorton",[sorting]);
return false;
});
});
Sort by name<br><br>
<table class="tablesorter" id="classes_table">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>Students</th>
</tr>
</thead>
<tbody>
<tr>
<td>Class1</td>
<td>School5 </td>
<td>32</td>
</tr>
<tr>
<td>Class2</td>
<td>School1</td>
<td>7</td>
</tr>
</tbody>
</table>

You could use a hack...
var columnIndex = $('table > thead > tr > th:contains("Name")').index();