Retrieve Data From a Table Cell Using jQuery




I have seen a lot of users asking questions on how to retrieve information when the the cell of a Table is clicked. In this post, I will show how to retrieve the following information from a Table Cell that was clicked

  • - Retrieve Text of the Clicked Cell
  • - Retrieve Text to the Left of the Clicked Cell
  • - Retrieve Text to the Right of the Clicked Cell
  • - Retrieve Row Index of the Clicked Cell
  • - Retrieve Column Index of the Clicked Cell
  • - Retrieve Number of Rows above the Current Clicked Row
  • - Retrieve Column Name of the Clicked Cell
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>How to retrieve information from cell clicked in a Table</title>
<
script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<
script type="text/javascript">
$(document).ready(function() {
$("tbody td").click(function(e) {
var currentCellText = $(this).text();
var LeftCellText = $(this).prev().text();
var RightCellText = $(this).next().text();
var RowIndex =$(this).parent().parent().children().index($(this).parent());
var ColIndex = $(this).parent().children().index($(this));
var RowsAbove = RowIndex;
var ColName = $(".head").children(':eq(' + ColIndex + ')').text();


$("#para").text('')
.append("<b>Current Cell Text: </b>" + currentCellText + "<br/>")
.append("<b>Text to Left of Clicked Cell: </b>" + LeftCellText + "<br/>")
.append("<b>Text to Right of Clicked Cell: </b>" + RightCellText + "<br/>")
.append("<b>Row Index of Clicked Cell: </b>" + RowIndex + "<br/>")
.append("<b>Column Index of Clicked Cell: </b>" + ColIndex + "<br/>")
.append("<b>Rows above Current Clicked Row: </b>" + RowsAbove + "<br/>")
.append("<b>Column Name of Clicked Cell: </b>" + ColName)

});
});

</script>
<
style type="text/css">
body
{
font-family:Garamond;
}
</style>
</
head>
<
body>
<
table id="tableone" border="1">
<
thead>
<
tr class="head">
<
th>Column 1</th>
<
th>Column 2</th>
<
th>Column 3</th>
</
tr>
</
thead>
<
tbody>
<
tr >
<
td>Row 0 Column 0</td>
<
td >Row 0 Column 1</td>
<
td >Row 0 Column 2</td>
</
tr>
<
tr >
<
td>Row 1 Column 0</td>
<
td>Row 1 Column 1</td>
<
td>Row 1 Column 2</td>
</
tr>
<
tr >
<
td>Row 2 Column 0</td>
<
td>Row 2 Column 1</td>
<
td>Row 2 Column 2</td>
</
tr>
<
tr >
<
td>Row 3 Column 0</td>
<
td>Row 3 Column 1</td>
<
td>Row 3 Column 2</td>
</
tr>
<
tr >
<
td>Row 4 Column 0</td>
<
td>Row 4 Column 1</td>
<
td>Row 4 Column 2</td>
</
tr>
<
tr >
<
td>Row 5 Column 0</td>
<
td>Row 5 Column 1</td>
<
td>Row 5 Column 2</td>
</
tr>
</
tbody>
</
table>
<
p id="para" />

</
body>
</
html>



Output

image


See a Live Demo here.

Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

15 Responses to "Retrieve Data From a Table Cell Using jQuery"
  1. Anonymous said...
    July 29, 2009 at 8:23 AM

    Instead of attaching a click event to every event in the table, use event delegation. Also you should be able to use sectionRowIndex which is supported in DOM1.

    $("tbody").click(function(e) {
    var $td = $(e.target).closest("td");
    var currentCellText = $td.text();
    var LeftCellText = $td.prev().text();
    var RightCellText = $td.next().text();
    var RowIndex = $td.parent().attr("sectionRowIndex");
    var ColIndex = $td.parent().children().index($td);
    var RowsAbove = RowIndex;
    var ColName = $td.closest("table").find('thead th:eq(' + ColIndex + ')').text();

  2. Suprotim Agarwal said...
    July 30, 2009 at 4:03 AM

    Anonymous: Thanks that was neat!

  3. Anonymous said...
    August 25, 2010 at 5:22 PM

    Hello Suprotim,
    I am new to jQuery and wondering how to get the selected cell to display its value in a text box?
    The example puts it as a para which is neat...but would appreciate if you could post/send the code to get the value in text field
    My email - bpmn2008@yahoo.com
    Thanks in advance.

  4. Suprotim Agarwal said...
    August 25, 2010 at 7:29 PM

    Assuming your textbox is declared with id="tb"

    use this code:

    $("input#tb").val(currentCellText);

  5. Anonymous said...
    October 5, 2010 at 9:33 PM

    hello Suprotim,

    how can i read the text of whole cell in clicked row index

  6. Suprotim Agarwal said...
    October 5, 2010 at 9:47 PM

    By whole cell, do you mean the entire row?

  7. Anonymous said...
    November 8, 2010 at 5:07 AM

    Thanks, just what i want !

  8. trish said...
    December 8, 2010 at 1:17 PM

    This is just what i was looking for! :) However, i'm my version is not working in IE (6 or 8) but does work in firefox. i'm dumping the contents of the td into a span tag. Would you have any thoughts as to why it's not working in IE? My code with in the document.ready function is:
    $('#numberprojects td.totalproj').each(function() {
    $("span#totaltxt").text('')
    .append(this.textContent)
    });

    Thanks for your help,
    Trish

  9. Suprotim Agarwal said...
    December 9, 2010 at 3:42 AM

    Trish: Did you check the Demo link with the article. You can run it on IE8..works just fine!

  10. trish said...
    December 10, 2010 at 10:17 AM

    Would you know of a cross-browser way of doing this? I tried to add an if, else state to detect the browser but, not being a coder, there is something wrong with my syntax. Here's that code:

    $('#numberprojects td.totalproj').each(function() {
    $("span#totaltxt").text('')
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
    var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a numberif (ieversion<=6)
    .append(this.innerText);//for IE
    }
    else {
    .append(this.textContent);//for other browsers -error points here
    }
    });

    Thanks for your help!
    Trish

  11. trish said...
    December 10, 2010 at 11:03 AM

    I figured it out:
    $('#numberprojects td.totalproj').each(function() { if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
    var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a numberif (ieversion<=6)
    $("span#totaltxt").append(this.innerText);
    }
    else {
    $("span#totaltxt").append(this.textContent);
    }
    });

    The second append wasn't attached to anything.

    Thanks again for this. :)

  12. Anonymous said...
    May 20, 2012 at 4:29 PM

    Gracias gracias gracias...!!

  13. Le ScareCrow said...
    November 2, 2012 at 12:42 AM

    thanks!!

  14. Gergely Kántor said...
    January 4, 2013 at 6:31 AM

    Thanks!! It is very useful!


    Is it possible to retrieve multiple rows?

  15. Anonymous said...
    April 25, 2013 at 4:46 AM

    Thanks for your article..It is very useful..I am using a table with with checkbox and data in each row. based on the chekbox select, i have to retrieve the selected row. Can you please give me pointers for that

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions