jQuery - How to address a cell in HTML Table

Senario:  To be able to access a particular cell <td></td> on one of the rows in HTML table.

Using jQuery we can easily access a particular row and then target a cell of a HTML table easily by using the eq() traversal filter method and the :nt-child() pseudo class methods available.

Let us say we are having the following table (Where firs value represents row, 2nd value cell)

To access or select any row using jQuery we can use (assuming there is only one table):

$("tr").eq(n) // where n is supposed to be a number between 0 and n^th row.

So to set background color of a row we can use:

$("tr").eq(2).css({"background": "gray"});   

Since now we can access the row, we can now target the cell in that row by using the :nth-child() selector, which selects the nth child of the enveloping element.

We know that $("tr").eq(n)  will select the nth row, now if we add td inside the main selector just like css stype with the nth-child selector, we can pin point a particular cell.

$("tr td:nth-child(x)").eq(y) // here we can replace the y with row number and x with cell number counting from 1.

So to select the 4th cell in 3rd row and set its background yellow, we can use:

$("tr td:nth-child(4)").eq(2).css({"background": "yellow"});

That all!!!