In this post javascript edit table, i want to create with ou how to add edit and delete rows of a html table with javascripts or jquery. i will make very simple example of add & Edit new table row using javascript, edit html table row using javascript and remove table row on button click.
Add Edit Delete Table Row Example using javascript
If you are beginner for javascript and you want to create Dynamically Add or Remove Table Rows in JavaScript and Save Data to a Database
some awesome example like add, edit and delete function with javascript. then this basic example will help to make start way to insert update delete (CRUD)operation using javascript.
i will use bootstrap for design so it look’s very nice. we will simply create one html file and include bootstrap and javascript file. after that i write full source code of javascript to create new HTML table row, edits table row data and delete table row data using javascript.
- Updating Dynamically HTML Table Using JavaScript
- Add Edit Delete Table Row Example using JQuery
- editable html table using javascript
So, let’s see bellow example and demo for testing.
Dynamically Add or Remove Table Rows in JavaScript
index.html
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Add Remove Table Rows in JavaScript</title>
<style>
* { font: 17px Calibri; }
table { width: 70%; }
table, th, td { border: solid 1px #DDD;
border-collapse: collapse; padding: 2px 3px; text-align: center;
}
</style>
</head>
<body onload="createTable()">
<h3>
Click the "Add New Row" button to add a new row to the table. <br> Enter values in each row and press the "Submit Data" button.
</h3>
<p>
<input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
</p>
<div id="cont"></div>
<p>
<input type="button" id="bt" value="Submit Data" onclick="submit()" />
</p>
<p id='output'></p>
</body>
<script>
var arrHead = new Array();
arrHead = ['', 'Student Name', 'Designation', 'Age'];
function createTable() {
var studentTbl = document.createElement('table');
studentTbl.setAttribute('id', 'studentTbl');
var tr = studentTbl.insertRow(-1);
for (var h = 0; h < arrHead.length; h++) {
var th = document.createElement('th');
th.innerHTML = arrHead[h];
tr.appendChild(th);
}
var div = document.getElementById('cont');
div.appendChild(studentTbl);
}
function addRow() {
var studentTable = document.getElementById('studentTbl');
var rowCnt = studentTable.rows.length;
var tr = studentTable.insertRow(rowCnt);
tr = studentTable.insertRow(rowCnt);
for (var c = 0; c < arrHead.length; c++) {
var td = document.createElement('td');
td = tr.insertCell(c);
if (c == 0) {
var button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Remove');
button.setAttribute('onclick', 'removeRow(this)');
td.appendChild(button);
}
else {
var ele = document.createElement('input');
ele.setAttribute('type', 'text');
ele.setAttribute('value', '');
td.appendChild(ele);
}
}
}
function removeRow(oButton) {
var studentTable = document.getElementById('studentTbl');
studentTable.deleteRow(oButton.parentNode.parentNode.rowIndex); // button -> td -> tr.
}
function submit() {
var liveEntry = document.getElementById('studentTbl');
var arrValues = new Array();
for (row = 1; row < liveEntry.rows.length - 1; row++) {
for (c = 0; c < liveEntry.rows[row].cells.length; c++) {
var element = liveEntry.rows.item(row).cells[c];
if (element.childNodes[0].getAttribute('type') == 'text') {
arrValues.push("'" + element.childNodes[0].value + "'");
}
}
}
document.getElementById('output').innerHTML = arrValues;
}
</script>
</html>
[php]
<h3>Dynamically Add or Remove Table Rows in JQuery</h3>
<b>index.html</b>
[php]
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Delete Table Row Example using JQuery - www.pakainfo.com</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 Example using JQuery - www.pakainfo.com</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>
I hope you get an idea about javascript edit table.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.