jQuery How to Get Table Cell Value TD Value [4 ways]

Satinder Singh / October 31, 2021 / 40 Comments

jQuery Get Table Cell TD Value: This article explains how to get table cell value on click event in jquery. Our table cell values may contain simple text values or some HTML element .i.e (div,span, textbox). So today will learn how to read these table cell value (TD value) using jquery on row selection .i.e how to get or accessing div content inside the TD using jquery. Also, will see how to store complete HTML table data into a JSON array.

By the end of this tutorial, we learned how to get values from table row, which can be used further to send data using jquery ajax or it can be used to perform some calculation based on TD cell values in jquery. There are many ways to get a value of a TD using jquery and we going to explain four simple ways to get table cell value by row and column.

For better understanding am breaking this post into 4 sections.

How to get the table cell TD values on click using jquery
How to read the table cell contains HTML element ie( div,span, textbox ) using jquery.
How to get the table cell-specific span or div HTML content using jquery.
How to get all the table row cell values using jquery.

First, we need to download and import the latest jquery library in our web page head tag. You can import from your server-hosted jQuery file, or you can also use it from the Google-hosted site (recommended).

Let's head to the coding part and go through each section step by step.

EXAMPLE:

Video:

#1: Get the table cell TD values on click using jquery

As we downloaded and imported the Jquery js file to our web page, now we are ready to use the jquery function.

HTML Markup: Add HTML Table with dummy data.

Next, we have to add HTML markup .i.e HTML Table whose data we want to read. You can create a dynamic HTML table in jquery with JSON data, or simply add hardcoded markup.

Here I hardcoded add HTML table with the column as Id, ProductName, Description, Action, and added some dummy data into it. So this is how our HTML markup looks like as written below.

<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Moto G</td>
<td>Moto G next generation smart phone</td>
<td><button class="btnSelect">Select</button></td>
</tr>
<tr>
<td>2</td>
<td>Iphone SE</td>
<td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>3</td>
<td>Sony z3</td>
<td>This is waterproof, well designed, etc</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>4</td>
<td>Moto X Play</td>
<td>Another class product from Moto G Family</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>5</td>
<td>Samsung S7</td>
<td>Best smart phone, nice UI etc.</td>
<td><button class="btnSelect">Select</button></td>
</tr>
</table>

jQuery: code to get TD text value on button click.

Now we bind a jquery click event on our select button (red color button) which we already added in each table row. Now using the jQuery .text() method we get the TD value (table cell value). So our code to get table td text value looks like as written below.

$(document).ready(function(){

    // code to read selected table row cell data (values).
    $("#myTable").on('click','.btnSelect',function(){
         // get the current row
         var currentRow=$(this).closest("tr"); 
         
         var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
         var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
         var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
         var data=col1+"\n"+col2+"\n"+col3;
         
         alert(data);
    });
});

So using the above jquery code we were able to read an HTML table cell value on a button click.

With the jQuery .text() method we get the text of td i.e. it returns only text value and skips the HTML and shows only text data.

View Demo

#2 : How to read the table cell value which contains HTML element ie( div,span, textbox ) using jquery.

HTML Markup: Add HTML Table and data with some HTML element.

Here we are going to learn how to get HTML table cell value that contains HTML content inside it.

In a real development scenario, there is a standard requirement, i.e., to fetch HTML content from a table cell. And append it later to another HTML element.

Here we added HTML data into our table. This is how our HTML markup looks like as written below.

<table border='1' id="myTable">
  <tr>
    <th>Id</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><strong>Moto G</strong></td>
    <td>Moto G next generation smart phone</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
  <tr>
    <td><span>2</span></td>
    <td><strong>Iphone SE</strong></td>
    <td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>3</span></td>
    <td><strong>Sony z3</strong></td>
    <td>This is waterproof, well designed, etc</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>4</span></td>
    <td><strong>Moto X Play</strong></td>
    <td>Another class product from Moto G Family</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>5</span></td>
    <td><strong>Samsung S7</strong></td>
    <td>Best smart phone, nice UI etc.</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
</table>

jQuery: Code to get HTML element inside (TD ) table cell value on button click.

First we bind click event on our select button and using jquery .html() method we get HTML content. Earlier we use .text() method which returns on text data of table cell td value.

So to return HTML data, here we use the .html() method which fetches all the HTML data inside our table cell. Now our code looks like as written below

$(document).ready(function(){

    // code to read selected table row cell data (values).
    $("#myTable").on('click','.btnSelect',function(){
         // get the current row
         var currentRow=$(this).closest("tr"); 
         
         var col1=currentRow.find("td:eq(0)").html(); // get current row 1st table cell TD value
         var col2=currentRow.find("td:eq(1)").html(); // get current row 2nd table cell TD value
         var col3=currentRow.find("td:eq(2)").html(); // get current row 3rd table cell  TD value
         var data=col1+"\n"+col2+"\n"+col3;
         
         alert(data);
    });
});

View Demo

#3: How to get the table cell-specific span or div HTML content using jquery.

HTML Markup:Add HTML Table and data with some HTML element.

Here in this section, we are going to see how to get a specific div or span element value inside a TD (table cell ). The previous section has shown how to fetch HTML content from a table cell.

Now we see how to fetch a particular HTML element from a table cell (TD) using jQuery. i.e., how to find the element in a table row or find a specific class element inside TD using jQuery.

<table border='1' id="myTable">
  <tr>
    <th>Id</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><strong class='pd-name'>Moto G</strong></td>
    <td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
  <tr>
    <td><span>2</span></td>
    <td><strong class='pd-name'>Iphone SE</strong></td>
    <td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>3</span></td>
    <td><strong class='pd-name'>Sony z3</strong></td>
    <td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>4</span></td>
    <td><strong class='pd-name'>Moto X Play</strong></td>
    <td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>5</span></td>
    <td><strong class='pd-name'>Samsung S7</strong></td>
    <td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
</table>

jQuery: Code to get table cell value of specific HTML element (div or span) content using jquery.

As we need to access specific div/span content inside table TD, we will use jquery .find() method. Using the jQuery .find() method and pass class-name of a specific HTML element we able to get the table cell value of specific div / span content.

Here we only want to fetch the price value from the last table cell. So now our code looks like as written below to access specific elements inside a table cell.

//*
$(document).ready(function(){

    $("#myTable").on('click', '.btnSelect', function() {
  // get the current row
  var currentRow = $(this).closest("tr");

  var col1 = currentRow.find(".pd-price").html(); // get current row 1st table cell TD value
  var col2 = currentRow.find(".pd-name").html(); // get current row 2nd table cell TD value

  var data = col1 + "\n" + col2;

  alert(data);
});
});
//*

View Demo

#4: How to get all the table row cell values using jquery.

Here now we read all the data of a given HTML table. In a real scenario many times we need to send complete table data to the server .i.e fetch table value and store it in JSON array, which later passes it to the server-side.

Let make this section very simple by just reading the HTML table data using jquery and store it in a JSON object.

First, we create an HTML table with dummy data and a button that does the magic work .i.e convert HTML table data to a JSON object.

So this is how our HTML table markup looks like as written below:

<button id="myButton"> Click Me</button>
<table border='1' id="myTable">
  <tr>
    <th>Id</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><strong class='pd-name'>Moto G</strong></td>
    <td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
  <tr>
    <td><span>2</span></td>
    <td><strong class='pd-name'>Iphone SE</strong></td>
    <td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>3</span></td>
    <td><strong class='pd-name'>Sony z3</strong></td>
    <td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>4</span></td>
    <td><strong class='pd-name'>Moto X Play</strong></td>
    <td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>5</span></td>
    <td><strong class='pd-name'>Samsung S7</strong></td>
    <td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
</table>

jQuery: Code to Fetch HTML table data values and save in JSON object.

Here we create an array variable arrData where we store our HTML table data. Here we use the jQuery .each() method to get all table row data.

With the below-written jquery code, we were able to save our complete HTML table data into a javascript array object.

//*
$("#myButton").on('click',function(){
 
   var arrData=[];
   // loop over each table row (tr)
   $("#myTable tr").each(function(){
        var currentRow=$(this);
    
        var col1_value=currentRow.find("td:eq(0)").text();
        var col2_value=currentRow.find("td:eq(1)").text();
        var col3_value=currentRow.find("td:eq(2)").text();

         var obj={};
        obj.col1=col1_value;
        obj.col2=col2_value;
        obj.col3=col3_value;

        arrData.push(obj);
   });
    alert(arrData);
    console.log(arrData);

});
//*

View Demo

Conclusion: This article covers a complete tutorial on how to read an HTML table cell TD value in jQuery on a button click. Here we provided different scenarios to get table td data with the live demo example. We are able to understand how to get HTML content from a table, also we learn how to get whole table data and save it into an array variable.

Other Reference:

You can also check these articles:

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

Your email address will not be published. Required fields are marked *

40 Comments

Anjan Kant 07/21/2016 15:05:29
another one more very good article on jquery how to get cell value.
Satinder singh 07/27/2016 12:19:08
Thanks Anjan. I hope the article was helpful.
rox 01/23/2017 06:24:38
Thank you for detailed and easy to understand article.
Edwin Franco 02/04/2017 00:07:13
Great solutions. Thank you!
Vijay maurya 04/07/2017 12:27:00
very nice tutorial thanks solve my problem.
Satinder singh 05/22/2017 16:45:34
Hi Vijay, Glad to help you
Gavin 06/07/2017 10:44:06
Cool article good to see the desired results.
mariam 07/17/2017 04:40:31
hi the last tutorial for all valuesisnt workig
Satinder singh 08/03/2017 08:02:00
Hi Mariam, It's working check in your browser console.
Albert 10/25/2017 09:47:43
This article, was very helpful.
Satinder singh 10/26/2017 06:45:55
Thanks Albert, keep visiting :)
FREDTERP 11/01/2017 00:38:42
For example #4 you have two variables named col2_value". There should be a col3_value? FREDTERP"
kamlesh chavan 11/01/2017 06:07:25
Satinder Singh sahab satshri a kal very first thanks , sir I 'm new to this latest s/w I use to work in vfoxpro ,vb then left ,having a very big gap ,i'll wonder if you'll help me in my little difficulty, will it be possible for u to pl send me a small online project with single page ,database connectivity etc.how to deploy and all. hope this will not obligate u
Satinder singh 11/01/2017 07:02:06
Thanks FREDTERP, I have updated it :)
Doug 02/27/2018 01:57:37
Very helpful Satinder. I'm taking a class and spent hours trying to find a solution until I found this post. Thanks, Doug
Mohit 03/22/2018 09:13:07
I read the i need excatly the same thing but my problem is that my table rows is dynamic. it can be 2, 4 or 10 rows. How can i do the exact thing for my scenario. is for loop inside jquery will help?
Satinder singh 05/09/2018 19:57:38
Thank you for reading it
CS Student 06/25/2018 05:43:00
Nice tutorial. I want to pass those col1, col2 values to another page. How can i put those things in session.I tried by myself, but no improvement.Could you help????
Nam 08/03/2018 08:08:20
Thank sir, you are my angle...
Manish 08/25/2018 10:46:44
#1: Get the table cell TD values on click using jquery - Thank you for this query it was very usefully for me.
Satinder singh 09/09/2018 10:47:26
Thanks, Manish Am glad you find it useful
Satinder singh 09/09/2018 10:47:56
Thanks for using such kind words
Juan 10/24/2018 01:40:39
thank you, it served me well
Ovidiu 11/07/2018 12:42:55
You save my day. Thank you!
rio 12/11/2018 11:35:12
hello nice code..but can we display all info on one button click using for loop
Adil Ayoub 03/23/2019 05:23:15
thanks you save me today
Satinder singh 04/06/2019 19:29:36
Hi, Please check working demo for all the method each one will work. Well here in your case you can replace alert(arrData)with alert(arrData[1].col2); and this will alert the desired value.
mike b 04/20/2019 15:38:28
Here my html code. I cant seem to get my data from table from inside my tbody? name email phone
mike b 04/20/2019 15:40:45
i cant seem to post my code?
Satinder singh 04/21/2019 16:36:00
Hi mike, Post your code inside tag. Or just share Js Fiddle with generated html"
Satinder singh 04/21/2019 16:38:59
Hi Adil Happy to find this useful
Howard Hackworth 06/18/2021 22:08:47
I am new to jquery and have been trying to figure out how to get the value of a specific cell of the current row using jquery. This was spectacular!!! Worked perfectly. Great information and presented in a very understandable manner. Thank you! Thank you! Thank you! :-)
Hendi Santika 07/28/2021 06:34:59
Nice article. I want to ask something. That shows one-row data. What if We want to show all table row when We click the show button outside the table? I want to pass to AJAX but I need to get all table values when We click some button. Thanks
PC 08/06/2021 11:05:00
Saves my day, really helpful
Ashraf 09/08/2021 16:30:45
Thanks!
Edwin 09/23/2021 13:34:39
Today I spent 6 good hour trying to fetch table cell data with jquery, as this article describes using text(). I could not make it work only to realise that the button has to be in the same row as where I was searching for data. My button was at the bottom of form element and after moving it into the table row where I was looking for the data, it worked. Thanks for the tutorial
George Moi 01/29/2022 09:06:06
Thanks so much for this article. it has saved me a great deal. Now up to that extent; How do i use JSON object "arrData" in PHP and insert the data into msql table. I want to use it in php by looping.
Satinder Singh 01/29/2022 12:07:24
Hi George Moi,
Glad to know, that you liked this article. Well I have written article on insert data using jQuery ajax in asp.net , but not in PHP, if you want, you can refer that
Henry 12/24/2022 19:41:55
Thanks very much sir, I have watching this video and I'm impressed, please after fetching the html data value and if I want place all the values into another html table page. How will I do it?
Satinder Singh 12/26/2022 18:49:16
Hi Henry, Am glad that you watched and like my youtube video. And the answer to your question is for passing value to another page we have 2 options. #1) BackEnd : Save data into database(sql,mysql etc) using ajax and display oin anywhere or on any page by fetching records from the database. #2) ClientSide: Save that array variable in Localstorage / Cookies and on any other page read and display it.

👳 Want to thank me? Buy Me a Coffee

↥