how to get a table cell value using jquery?

how to get a table cell value using jquery: Retrieve Data From a Table Cell Using jQuery. How Get Table’s Row And Column Value Using JQuery. Here i am finding table’s rows columns values on clicking.

how to get a table cell value using jquery

How to get the table cell TD values on click using jquery — find() method. Find out how many cells there are in the first row in a table.

Read Table Header And Row Data Using JQuery

index.html

<!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 activenblData = $(this).text();
var LeftnblData = $(this).prev().text();
var RightnblData = $(this).next().text();
var RowIndex =$(this).parent().parent().children().index($(this).parent());
var memberIndex = $(this).parent().children().index($(this));
var RowsAbove = RowIndex;
var memberName = $(".head").children(':eq(' + memberIndex + ')').text();


$("#para").text('')
.append("<b>Active Cell Text: </b>" + activenblData + "<br/>")
.append("<b>Text to Left of Clicked Cell: </b>" + LeftnblData + "<br/>")
.append("<b>Text to Right of Clicked Cell: </b>" + RightnblData + "<br/>")
.append("<b>Row Index of Clicked Cell: </b>" + RowIndex + "<br/>")
.append("<b>memberumn Index of Clicked Cell: </b>" + memberIndex + "<br/>")
.append("<b>Rows above Active Clicked Row: </b>" + RowsAbove + "<br/>")
.append("<b>memberumn Name of Clicked Cell: </b>" + memberName)
  
});
});

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

</body>
</html>

Read all the data of the table.

<script type="text/javascript">  
        $(document).ready(function () {  
            $('#html_to_genrate_img').click(function () {  
                var result_member_dt = "";  
                var flagTbl = true;  
                $('#tblArticles tbody>tr').each(function () {  
                    $('td', this).each(function () {  
                        if (result_member_dt.length == 0 || flagTbl == true) {  
                            result_member_dt += $(this).text();  
                            flagTbl = false;  
                        }  
                        else  
                            result_member_dt += " | " + $(this).text();  
                    });  
                    result_member_dt += "\n";  
                    flagTbl = true;  
                });  
   
                alert(result_member_dt);  
            });  
        });  
</script>  

<input id="html_to_genrate_img" type="button" value="Read HTML Table Using JQuery/Javascript" />   

HTML Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<table id="tblArticles" border="1px" cellpadding="2" cellspacing="2">  
<caption style="text-align:left;font-weight:bold;">Blog List:</caption>  
 <thead style="background-color:Lime;">  
  <tr>  
     <th>Blog Code</th>  
     <th>Blog Title</th>  
     <th>Blog Published Date</th>  
     <th>No. of Views</th>  
  </tr>  
 </thead>  
 <tbody>  
  <tr>  
     <td>PI0001</td>  
     <td>read.csv r documentation and read.delim in r, read table abap</td>  
     <td>Jan, 2022</td>  
     <td>2356</td>  
  </tr>  
  <tr>  
     <td>PI0002</td>  
     <td></td>  
     <td>Feb, 2022</td>  
     <td>5465</td>  
  </tr>  
  <tr>  
     <td>PI0003</td>  
     <td>reading and getting data into r</td>  
     <td>Mar, 2022</td>  
     <td>5454</td>  
  </tr>  
  <tr>  
     <td>PI0004</td>  
     <td>how to read data from datatable in c# using linq</td>  
     <td>Apr, 2022</td>  
     <td>8564</td>  
  </tr>  
 </tbody>  
</table>  

Don’t Miss : How To Get Selected Row Value In Html Table

I hope you get an idea about how to get a table cell value using jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.