How To Get Selected Row Value In HTML Table Using jQuery
Last Updated : Mar 11, 2024
IN - jQuery HTML | Written & Updated By - Ashish
In this article we will show you the solution of how to get selected row value in html table using jQuery, jQuery allows the data to be fetched from the row of the table and placed in the bootstrap model's body. The first step is to locate the required data within the table using the find() method.
Textual content is retrieved from the location and stored into variables using the text() method.
Afterwards, we build a string containing HTML code to display the data in the model's body.In this example, we'll make an HTML table with columns and rows.
First, we need to select the row in which that cell is located in order to obtain the value of the cell.
The closest() method will be used in this case for selecting the row. Using this method, you can find the first ancestor of an element you have selected.
The element is inherited from its ancestors in the DOM starting with its current element. Therefore, we should be able to select the current row.
Creating an HTML file will be enough to accomplish this.Following that, we will include Bootstrap for a more professional appearance, followed by a jQuery file.add the new row to either a table that already exists in JQuery,use the code below.
Additionally, we will write code in JQuery to edit and remove row data from the table.A table date or even the cells in a table row are represented by the notation "<td>".
Are using the JavaScript library referred to as "jQuery" to obtain the <td> values besides clicking just on table row.
It is a small, fast, and powerful JavaScript library. To retrieve the value systems of cells throughout jQuery, use the "text()" method.
Step By Step Guide On How To Get Selected Row Value In HTML Table Using jQuery :-
<!DOCTYPE html>
<html>
<head>
<title> Use of JQuery to Add Edit Delete Table Row </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1> Talkerscode Use of JQuery to Add Edit Delete Table Row </h1>
<form>
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" value="Smith" required="">
</div>
<div class="form-group">
<label>Email:</label>
<input type="text" name="email" class="form-control" value="smith@abc.com" required="">
</div>
<button type="submit" class="btn btn-success save-btn">Save</button>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Email</th>
<th width="200px">Action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript">
$("form").submit(function(e){
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
$(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});
$("body").on("click", ".btn-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
$(this).hide();
});
$("body").on("click", ".btn-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-update").remove();
$(this).parents("tr").find(".btn-cancel").remove();
});
$("body").on("click", ".btn-update", function(){
var name = $(this).parents("tr").find("input[name='edit_name']").val();
var email = $(this).parents("tr").find("input[name='edit_email']").val();
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").attr('data-name', name);
$(this).parents("tr").attr('data-email', email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-cancel").remove();
$(this).parents("tr").find(".btn-update").remove();
});
</script>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed and head closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a form, under the form we create a name, email.
- Then we create a button to submit.
- Then we close the form.
- Then we create a table using table head, table body, table horizontal.
- Then we close the table.
- Then we again open the <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- After that we close program using </center></body></html>
Conclusion :-
This can be achieved by producing an HTML file. Afterwards, for a more polished appearance, we will include Bootstrap, which will be followed by a jQuery file.
We will also create JQuery code to change and delete row data from table.
The notation "<td>" denotes a table date as well as a row of table cells are utilising the "jQuery" JavaScript package to acquire the td> values rather than merely clicking on the table row.
I hope this article on how to get selected row value in html table using jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
