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

/ / 41 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.

  1. How to get the table cell TD values on click using jquery
  2. How to read the table cell contains HTML element ie( div,span, textbox ) using jquery.
  3. How to get the table cell-specific span or div HTML content using jquery.
  4. 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+"
"+col2+"
"+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+"
"+col2+"
"+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 + "
" + 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:
  1. jQuery - Get Content and Attributes 
  2. jQuery Text() method


You can also check these articles:

  1. Preview Image before uploads it on the server.
  2. Convert HTML to Image in jQuery [Div to Image].
  3. How to delete table row TR in jquery on button click.
  4. jQuery Ajax JSON Example in Asp.net with SQL database.

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 *

41 Comments

👳 Want to thank me? Buy Me a Coffee
↥