Obtain Field (td) Values by Clicking on Table Row

Sometimes, the specific data, particular row data, or the specific column from the HTML table on the website is required to perform some functionalities. For instance, saving the edited values to the database. To do this, JavaScript offers an effective and small library called “jQuery”.

This article will describe the process of getting all the table row values.

How to Obtain Field (td) Values by Clicking on Table Row?

“<td>” is the table date or the cells of a table row. To get the <td> values by clicking on the table row, use the JavaScript library called “jQuery”. It is a compact, fast and effective JavaScript library. In jQuery, use the “text()” method for getting the values of cells.

Example
In HTML file, create a table using

tag that stores the student’s information:

<center>
<table id="getRowData" border="2">
<thead>
<th>Id</th>
<th>Name</th>
<th>Roll #</th>
<th>Age</th>
<th>Admission Date</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Robert</td>
<td>23</td>
<td>15</td>
<td>16, Jan 2000</td>
<th><button class="getRow">getRowData</button></th>
</tr>
<tr>
<td>2</td>
<td>Rohnda</td>
<td>20</td>
<td>13</td>
<td>18, Feb 2003</td>
<th><button class="getRow">getRowData</button></th>
</tr>
<tr>
<td>3</td>
<td>Stephen</td>
<td>19</td>
<td>18</td>
<td>24, Jan 2008</td>
<th><button class="getRow">getRowData</button></th>
</tr>
</tbody>
</table>
</center>

In the <head> tag, add the “jQuery” library using the “src” attribute:

In <script> tag or in JavaScript file, use the given lines of code:

$(document).ready(function(){
$("#getRowData").on('click', '.getRow', function(){
var currentRow=$(this).closest("tr");
var rCell1=currentRow.find("td:eq(0)").text();
var rCell2=currentRow.find("td:eq(1)").text();
var rCell3=currentRow.find("td:eq(2)").text();
var rCell4=currentRow.find("td:eq(3)").text();
var rCell5=currentRow.find("td:eq(4)").text();
var rowData = "rowCell1: " + rCell1 +"\n"+ "rowCell2: " + rCell2 +"\n" + "rowCell3: " + rCell3 + "\n" + "rowCell4: " + rCell4 + "\n" + "rowCell5: " + rCell5;
alert(rowData);
});
});

In above code snippet:

First, call the “ready()” method to make a function available after the document is loaded.
Get the table using its id “getRowData” and generate a “click” event on the button using its assigned class “getRow” that invokes a function on the click event.
In function, pass the row as an object.
Then, get the values of each cell using the “text()” method.
Combine all the data in a variable “rowData” using the concatenation operator.
Finally, show all the data in an alert() method.

Output

That’s all about getting the <td> values by clicking on the table row.

Conclusion

For getting the <td> values, by clicking on the table row, use the JavaScript library called “jQuery”. jQuery offers the “text()” method that can be utilized for getting the values of cells. In this article, we described the process to get all the table row values.

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.

View all posts