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

2
Our Reader Score
[Total: 0 Average: 0]
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 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 section.

  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 latest jquery library in our web page head tag. You can import from your server hosted jQuery file, or you can also use from the Google-hosted site (recommended). Let’s head to the coding part and go through each section step by step. EXAMPLE: How to get table cell td value in jquery


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

As we downloaded and imported Jquery js file in our web page, now we are ready to use 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 dynamic HTML table in jquery with JSON data, but for simplicity, I hard coded add HTML table with the column as Id, ProductName, Description and added some dummy data into it. So this is how our HTML markup looks like as written below.

jQuery: code to get TD value on button click.

Now we bind a jquery click event on our select button which we already added in each row. Using jquery .text() method we get the TD value (table cell value). This is how our code look like as written below.

So using above jquery code we able to read a HTML table cell value on button click.  jquery .text() method will return only text value i.e skip the html and show only text data. Try It Yourself ⇒


#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 which contains HTML content inside it. In 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 bellow.

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 .html() method which fetch all the html data inside our table cell. So now our code look like as written below

Try It Yourself ⇒


#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 specific div or span element value inside a TD (table cell ). In the previous section have shown how to fetch HTML content from a table cell, now we see how to fetch particular HTML element from a table cell (TD) using jquery. i.e., how to find the element in a table row or find class inside TD using jquery.

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 .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 last table cell. So now our code look like as written below to access specific element inside table cell.

Try It Yourself ⇒


#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 real scenario many time we need to send complete table data to the server .i.e fetch table value and store it in JSON array, which later pass it to the server-side. Let make this section very simple by just reading the HTML table data using jquery and store it in JSON object. First, we create HTML table with dummy data and a button which do the magic work .i.e convert HTML table data to JSON object. So this is how our HTML table looks like

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.  With below-written jquery code, we able to save our complete HTML table data into javascript array object.

Try It Yourself ⇒

Conclusion: This article cover a complete tutorial on how to read an HTML table cell TD value in jquery on button click. Hope you like this tutorial.

Other Reference:

  1. jQuery – Get Content and Attributes 
  2. jQuery Text() method

You can also check these articles:

  1. Preview Image before upload 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.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time! 


Get your Printable Copy

2 COMMENTS

LEAVE A REPLY