JQuery Table Selector: How to manipulate table?

Understanding JQuery Selecotrs concepts are very important for any developer who want to use JQuery in their website or develop some cool plug-in with JQuery. We have learn some basic things about JQuery Selectors in our last post.

In this post we will explore JQuery Table Selecotrs. Tables uses in web pages are very common. Tables provides a good layout for design on web pages.

With JQuery we can manipulate the appearance of the table, change the look and feel of the table, read table cell values and apply cool effects on tables. We will learn how we can change the properties and apply cascading style sheet on table, rows, and columns. We will also learn how we can read the table cell values with the help of JQuery Table selectors.

To start with let us say we have following table in the web page. We have 3 columns and 3 rows in the table.

To apply style or change the appearnce of the table in JQuery; we can write following code in JQuery.

<script>
$("table").css("background-color","yellow");
</script>

Anything in JQuery starts with $() or JQuery(). We have pass table tag. To apply any Cascading Style Sheet we use .css(propertyname, propertyvalue). So we pass the background-color property and its value yellow. The table appearance changes to following.

To apply style on table rows we can write the following JQuery script code.

<script>
//Change the color for first row 
$("table tr:first ").css("background-color","yellow");

//Change the color for second row
$("table tr:nth-child(2)").css("background-color","pink");

//Change the color for third row
$("table tr:nth-child(3)").css("background-color","brown");

//Change the color for fourth row
$("table tr:nth-child(4)").css("background-color","silver");
</script>

The output looks like following for the table now.

It is important to understand the concept of nth child in JQuery. From the code you can observe that we have passed table tr:first for first row. So if you want to refer the first child of the Table row you can pass table tr:first. The concept is applied to all the HTML tags or elements which have a set of child. If you have an unordered list in the web page you can refer the first list item as ul li:first. You can apply the first child concepts to paragraphs also. If you have multiple paragraphs in your web page and you want to manipulate only first parargraph you can refer it as p:first.

The second and subsequent rows were refer as table tr:nth-child(number), this mean nth child of tr (table row) under table tag.

The nth child concepts works well with the table cells (td). So if you have to apply background-color to second and third cell of every row, the JQuery code is like this:

<script>
$("table tr td:nth-child(2)").css({"background-color":"green","color":"white"});
$("table tr td:nth-child(3)").css({"background-color":"red","color":"white"});
</script>

The output of the code is following:

The odd and even concept in table selectors is very useful. If you have a table and you want to create a cool zebra strip look in your table, you can refer each odd and even row like this in table.

<script>
$("table tr:nth-child(odd)").css({"background-color":"silver"});
$("table tr:nth-child(even)").css({"background-color":"yellow"});
</script>

The output for the above code is following:

One important thing I want to mention here is, if you have multiple tables and table does not have an unique ID to identify itself; the table selector code you write in JQuery applies to all the tables in the web page. So if I write following code in JQuery script;

$("table tr td:nth-child(3)").css({"background-color":"red","color":"white"});

The effect will be applicable to all the tables in web page.

With JQuery you can also read the cell values of a table. JQuery has provided each loop that you can apply to tables and read cell values. To read first column values we can write the following code:

<script>
var strProductName;
strProductName='';
$('table tr').each(function() {
    strProductName=strProductName + "  |  " + $(this).find("td:first").html();    
});
alert(strProductName);
</script>

The output looks like following; the alert message box has shown each cell value.

With this I will be wrapping this post. Thanks for reading till this point

---

Source code of example used in this post is following:

<HTML
<HEAD>
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</HEAD>
<BODY>
<TABLE border="1" style="border: 1px solid black">
<TR>
    <TD>Product Name</TD>
    <TD>Product Quantity</TD>
    <TD>Product Price</TD>
</TR>
<TR>
    <TD>Dell Laptop</TD>
    <TD>50</TD>
    <TD>$1200.00</TD>
</TR>
<TR>
    <TD>Apple IPod </TD>
    <TD>250</TD>
    <TD>$10,200.00</TD>
</TR>
<TR>
    <TD>Microsoft XBOX</TD>
    <TD>150</TD>
    <TD>$2200.00</TD>
</TR>
</TABLE>

<P>
<!--
<TABLE border="1" style="border: 1px solid black">
<TR>
    <TD>Country Name</TD>
    <TD>Capital</TD>
    <TD>Rank</TD>
</TR>
<TR>
    <TD>US</TD>
    <TD>Washington</TD>
    <TD>#1</TD>
</TR>
<TR>
    <TD>India </TD>
    <TD>New Delhi</TD>
    <TD>#2</TD>
</TR>
</TABLE> -->
<script>

//$("table tr:first ").css("background-color","yellow");
//$("table tr:nth-child(2)").css("background-color","pink");
//$("table tr:nth-child(3)").css("background-color","brown");
//$("table tr:nth-child(4)").css("background-color","silver");

//$("table tr:nth-child(odd)").css({"background-color":"silver"});
//$("table tr:nth-child(even)").css({"background-color":"yellow"});


//$("table tr td:nth-child(3)").css({"background-color":"red","color":"white"});

var strProductName;
strProductName='';

$('table tr').each(function() {
    strProductName=strProductName + "  |  " + $(this).find("td:first").html();    
}
);
alert(strProductName);
</script>
</BODY>
</HTML>