Learning jQuery

HTML tables are great for displaying data in tabular form and when implemented can also support features like sorting, paging, and filtering records. You may need to interact with the table to get its data when a table cell is clicked. So in this quick post, we’ll look at how to get the table cell value when the user clicks on the cell using jQuery. Take a look at the image below for reference:

HTML Markup

To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age, and Country, along with some random data. There is also a span element present to show the clicked table cell value.

<tableid="tblData">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Maria Anders</td>
<td>30</td>
<td>Germany</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>24</td>
<td>Mexico</td>
</tr>
<tr>
<td>Roland Mendel</td>
<td>100</td>
<td>Austria</td>
</tr>
<tr>
<td>Helen Bennett</td>
<td>28</td>
<td>UK</td>
</tr>
<tr>
<td>Yoshi Tannamuri</td>
<td>35</td>
<td>Canada</td>
</tr>
<tr>
<td>Giovanni Rovelli</td>
<td>46</td>
<td>Italy</td>
</tr>
<tr>
<td>Alex Smith</td>
<td>59</td>
<td>USA</td>
</tr>
</table>
<br/>
<span id="spnText"></span>

CSS

The following CSS classes are used to style the table and its rows. The highlightCSS class styles the selected table cell. There are also styles defined to provide alternate colors to the table rows.

table {
 font-family: arial, sans-serif;
 border-collapse: collapse;
 width: 100%;
}
td,
th {
 border: 1px solid #dddddd;
 text-align: left;
 padding: 8px;
}
th {
 background-color: #ccd;
}
tr:nth-child(even) {
 background-color: #dddddd;
}
tr:nth-child(odd) {
 background-color: #ddeedd;
}
.highlight {
 background-color: Yellow;
 color: Green;
}

jQuery Code

To get the value of the clicked cell, the jQuery solution is to attach a click event to all the table cells and assign the highlight CSS to the clicked cell and obtain its value. Then show this value on the screen by assigning it to the span element.
Here is the complete jQuery code:

$(document).ready(function() {
 $("#tblDatatr:has(td)").mouseover(function(e) {
 $(this).css("cursor", "pointer");
 });
 $("#tblDatatr:has(td)").click(function(e) {
 $("#tblData td").removeClass("highlight");
 var clickedCell= $(e.target).closest("td");
 clickedCell.addClass("highlight");
 $("#spnText").html(
 'Clicked table cell value is: <b> ' + clickedCell.text() + '</b>');
 });
});

This jQuery code performs the following functions:

• First, it attaches a mouseover event to all TD elements to change the mouse cursor to hand style. This tells users that the cell is clickable.
• Then the code attaches a click event to all the TD elements of the table. Inside the click event, it first removes the highlight CSS class from the previously clicked TD. Then, it obtains the clicked cell object using the jQuery closest method. This method returns the first element that matches the selector. It starts the search from the current element and progresses up through the DOM tree until it finds a match. Once the currently clicked cell is identified, we assign the highlight class to the currently selected cell. In the end, it obtains the clicked cell's text and assigns it to the span tag to display it on screen.

You can check out the demo at the following link!

Conclusion

To sum it up, we’ve just learned how to get the clicked HTML table cell value using jQuery. The jQuery solution uses jQuery closest to find the clicked table cell within the table element. The solution also highlights the selected element and then displays the cell’s value on the screen. Based on your needs, you can easily modify this section to take further action on the cell value.