Ajax CSS HTML jQuery PHP

Table manipulation with jQuery

     I was working on on of my clients project in which i came across Table manipulation with jQuery, tds and trs using jquery. Manipulating tables with plain javascript is really a headache but with jQuery its like moving magic stick. Its really easy to manipulate table with jquery than it used to be with plain javascript. I really love jQuery because of its simplicity and usefulness.
So lets take a look at all the tricks that are useful for Table manipulation with jQuery.1) Count number of columns in a table
2) Colorize alternate tr to make Zebra pattern
You can also use term “odd” like in below example.

$(“.grid tr:odd”).css(“background-color”, “#E4E4E4”);.
See the image below…how zebra pattern looks like

Table manipulation with jQuery

Table zebra pattern with jquery

Table zebra pattern with jquery

3) Traverse through each td of the table

4) Find parent tr of particular td
5) Find all the values from td of particular column
eg:
For below table if you print
using nth-child(1) then it will return all the values from column one (First name) as shown in below image.

print all column values using jquery

print all column values using jquery

Similarly if you want to get all the values from column2 then use

and same for all other columns.

18 Comments

Leave a Comment

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares

Let your friends know what are you reading

Share this post with your friends!