Add Edit Delete Table Row using JQuery can be done by manipulating the DOM (Document Object Model) of an HTML table. JQuery is a JavaScript library that simplifies the process of working with the DOM.
To add a new row to a table, you can use the JQuery append() method to add a new row element to the table’s tbody element. The new row element can be created using JQuery’s createElement() method and then appended to the table using the append() method.
To edit an existing row, you can use JQuery’s find() method to locate the row element in the table and then use the text() or val() method to change the text or value of the cells.
To delete a row, you can use the JQuery remove() method to remove the row element from the table.
Add Edit Delete Table Row using JQuery
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Delete Table Row using JQuery</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>Add Edit Delete Table Row using JQuery</h1>
<form>
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" value="Paresh" required="">
</div>
<div class="form-group">
<label>Email:</label>
<input type="text" name="email" class="form-control" value="[email protected]" 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>In this example, the table is identified by the id ‘table-id’ and the tbody element is selected to add and delete rows from it. The find() method is used to select the last row, and the text() method is used to change the text of the first cell. The remove() method is used to delete the last row. It’s important to note that when using JQuery to add, edit, or delete table rows, it’s important to take care of any additional actions that may be needed such as updating the database and other related actions.
What is Jquery
jQuery is a fast, small, and feature-rich JavaScript library that makes HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery is designed to simplify the process of scripting by providing an easy-to-use interface for interacting with HTML documents. It allows developers to select elements, create animations, handle events, and perform other common tasks using a simple set of methods. jQuery also provides a wide range of utility functions for working with arrays, strings, and other data types.
jQuery is lightweight and easy to learn, making it a popular choice for web developers. It is also extensible, meaning that developers can create their own plugins and add new features to the library. There are many available plugins and libraries that can be added to jQuery to extend its functionality.
In summary, jQuery is a powerful JavaScript library that makes it easy to work with HTML documents, handle events, create animations, and perform other common tasks. It is lightweight, easy to learn, and extensible, making it a popular choice for web development.