Home » Blog » Beginner » Get HTML Table Cell Value Using jQuery

Get HTML Table Cell Value Using jQuery

HTML tables are nice for displaying knowledge in tabular type and when carried out may also help options like sorting, paging, and filtering data. Chances are you’ll have to work together with the desk to get its knowledge when a desk cell is clicked. So on this fast publish, we’ll take a look at the best way to get the desk cell worth when the consumer clicks on the cell utilizing jQuery. Check out the picture under for reference:

Get HTML Table Cell Value

HTML Markup

To get began, create a normal HTML desk on the web page. For this demo, our desk has three columns: Identify, Age, and Nation, together with some random knowledge. There’s additionally a span factor current to point out the clicked desk cell worth.


Identify
Age
Nation


Maria Anders
30
Germany


Francisco Chang
24
Mexico


Roland Mendel
one hundred
Austria


Helen Bennett
28
UK


Yoshi Tannamuri
35
Canada


Giovanni Rovelli
forty six
Italy


Alex Smith
fifty nine
USA



CSS

The next CSS courses are used to type the desk and its rows. The highlightCSS class types the chosen desk cell. There are additionally types outlined to offer alternate colours to the desk rows.

desk 
 font-household: arial, sans-serif;
 border-collapse: collapse;
 width: one hundred%;

td,
th 
 border: 1px strong #dddddd;
 textual content-align: left;
 padding: 8px;

th 
 background-shade: #ccd;

tr:nth-youngster(even) 
 background-shade: #dddddd;

tr:nth-youngster(odd) 
 background-shade: #ddeedd;

.spotlight 
 background-colour: Yellow;
 colour: Inexperienced;

jQuery Code

To get the worth of the clicked cell, the jQuery answer is to connect a click on occasion to all of the desk cells and assign the spotlight CSS to the clicked cell and acquire its worth. Then present this worth on the display by assigning it to the span component.
Right here is the entire jQuery code:

$(doc).prepared(perform() 
 $("#tblDatatr:has(td)").mouseover(perform(e) 
 $(this).css("cursor", "pointer");
 );
 $("#tblDatatr:has(td)").click on(perform(e) 
 $("#tblData td").removeClass("spotlight");
 var clickedCell= $(e.goal).closest("td");
 clickedCell.addClass("spotlight");
 $("#spnText").html(
 'Clicked desk cell worth is:  ' + clickedCell.textual content() + '');
 );
);

This jQuery code performs the next features:

  • First, it attaches a mouseover occasion to all TD parts to vary the mouse cursor handy fashion. This tells customers that the cell is clickable.
  • Then the code attaches a click on occasion to all of the TD parts of the desk. Inside the press occasion, it first removes the spotlight CSS class from the beforehand clicked TD. Then, it obtains the clicked cell object utilizing the jQuery closest technique. This technique returns the primary component that matches the selector. It begins the search from the present factor and progresses up by way of the DOM tree till it finds a match. As soon as the at present clicked cell is recognized, we assign the spotlight class to the at present chosen cell. In the long run, it obtains the clicked cell’s textual content and assigns it to the span tag to show it on display.

You possibly can take a look at the demo on the following link!

Conclusion

To sum it up, we’ve simply discovered the best way to get the clicked HTML desk cell worth utilizing jQuery. The jQuery answer makes use of jQuery closest to seek out the clicked desk cell inside the desk aspect. The answer additionally highlights the chosen aspect after which shows the cell’s worth on the display. Based mostly in your wants, you’ll be able to simply modify this part to take additional motion on the cell worth.