How to get row data of html table using jquery

In this jquery tutorial you will learn how to get the row data of html table. To manipulate and filter data is now a days common task for web developers. I will present two scenarios in front of you that will cover how to get the row data of both static table and the table that is generated dynamically. let's have a look over how to do so

First Scenario:-

Getting the row data of html static table using jquery.

Let's suppose, You have static html table and you want to get the data of your desired row. For this you have to copy/paste this example.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function()

{

$("#tblTest td:nth-child(1)").click(function(event){

//Prevent the hyperlink to perform default behavior
event.preventDefault();
//alert($(event.target).text())

var $td= $(this).closest('tr').children('td');


var sr= $td.eq(0).text();

var name= $td.eq(1).text();

var city= $td.eq(2).text();

alert(sr);

alert(name);

alert(city);
}

);

});

</script>

And then i draw html table

<table id="tblTest">
<tr>
<td>
<a href="#">1</a>
</td>
<td>
Adeel Fakhar
</td>
<td>
Pakistan
</td>
</tr>
<tr>
<td>
<a href="#">2</a>
</td>
<td>
Mark David
</td>
<td>
America
</td>
</tr>
</table>

So now, if you will click the hyperlink of first row, you will get the data of whole row. First you will get the data or inner html of table’s first cell then second and then you will get the data or inner html of table’s last cell.

But what if you want to get the row data of html table that is generated dynamically?

Second Scenario:-

Getting the row data of dynamic html table using jquery

Yeah, to get the row data of table that is generated dynamically, containing the values from database in it's cell. you have to use the jquery built-in live() function

$(document).ready(function()

{

$("table[id$='tblDisplay'] td:nth-child(1)").live('click',function(event)

{
//Prevent the hyperlink to perform default behavior
event.preventDefault();
var $td= $(this).closest('tr').children('td');
var sr= $td.eq(0).text();

var name= $td.eq(1).text();

var city=$td.eq(2).text();

alert(sr);

alert(name);

alert(city);

//$("#txtName").val(name); // assigning the name to the textbox

}

);

});

The reason why we need live() function is that it allows you to set the function to not only current elements but also future elemnents, That's why all your page elements will stay live even after you have made an ajax call.

live () function Binds a handler to an event (like click) for all current and future matched elements. It can also bind custom events.

This function is similar to the .click() but .click() will only match elements that are created via the XHTML with DOM is loaded. With that said, using .live() is very useful for dynamic websites, where you are creating and removing elements on your website

.click() function does not work on dynamically created items.

You can adopt same method to get the row data of gridview because when asp.net page renders then gridview becomes <table>.

So this is the way to get the row data of html table in jquery.