Home » how to add edit and delete rows of a html table with javascript?

how to add edit and delete rows of a html table with javascript?

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.

Read Also:  Image Uploads with Angular 9 Tutorial

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.

Read Also:  jQuery Drag and Drop List Example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  how to check a plugin is activated or not in wordpress
  2. Read Also:  QueryException in laravel 6 Exception Handling
  3. Read Also:  jquery Compress or resize Image File Size before Uploading PHP Code
  4. Read Also:  How to Check If String Contains a Substring in PHP
  5. Read Also:  How to fix the "jQuery or $ not defined WordPress" Issue in WordPress?
  6. Read Also:  Angular 9/8 Material Radio Button Examples
  7. Read Also:  Laravel 6 - Simple Pagination Example Tutorial
  8. Read Also:  jQuery Drag and Drop List Example
  9. Read Also:  Node JS server side Form validation on submit example
  10. Read Also:  Angular 9/8 Material Radio Button Examples

Leave a Comment

Your email address will not be published. Required fields are marked *