How to edit row in table using JavaScript

In this tutorial, we will create a dynamic table using JavaScript and edit a row in the table. Previously, we have dealt with implementing the JavaScript snippet inside an HTML body.

So we are aware of many HTML tags and JavaScript Methods and Functions and how they work in a program.

Now further, we will create a dynamic table using JavaScript from a newer approach and add a feature of editing the rows in the table.

Before we begin we will discuss few HTML tags and JavaScript concepts used in the program for better understanding.

HTML

<head> tag

This head tag is the place where the metadata(data about the stored data of the document) is stored. It is the first element in an HTML document.

<style> tag

This style tag is used to contain or link CSS styling of the HTML page using attributes such as media, type, and scoped.
It is usually placed inside the head element.

<button> tag

This button tag specifies the clickable button in an HTML page with a particular attribute associated with it.
There are a number of type attributes that the button tag can contain.
For example: autofocus, form_id, name,value, and so on.

<body> tag

This body tag is the place that is the core area of the HTML document.
It includes the content of the page.
It is used just once on an HTML page.

<table> tag

This table tag is used to form a structure of a table in an HTML document which can be further filled with data.

JavaScript

onclick event

The onclick is an event handler in JavaScript which is used to perform a task when a user clicks the corresponding button on the page. We will understand the use of this event handler in the example given below.

function()

A function is a block of code used to perform a logical task in a program that can be invoked multiple times after it is declared. We have already covered the function in detail in the JavaScript Functions tutorial.

document.getElementById()

The document.getElementById() method in HTML DOM (Document Object Model), is the most common and easiest way of accessing the form elements in a HTML document.

document.createElement()

The document.createElement() method in HTML DOM (Document Object Model), is used to create an element node with a specified name.

insertRow() Method

The insertRow() method is used in an HTML page to generate empty <tr> elements and then they added to the table.

insertCell() Method

The insertCell() method is used in an HTML page to insert a particular cell inside a table.

contains() Method

The contains() method in HTML DOM (Document Object Model), is used to check whether a node is s descendant of a particular node or not using boolean values.

closest() Method

The closest() method is used in JavaScript to find a node that matches the selector string by traversing the element and its parent.

appendChild() Method

The appendChild() method is used in JavaScript to add a node at the end of a list of children of a specific parent node.

insertAdjacentHTML() Method

The insertAdjacentHTML() method is used in an HTML page to insert a text as HTML or XML at a specified position in the DOM tree.

innerHTML Property

The innerHTML property is a property in JavaScript that allows the script to manipulates an HTML page by reading and writing data within a HTML tag.

classList property

The classList property in HTML is used to add, remove, and toggle CSS classes on an element by returning the class name(s) of the element as a DOMTokenList Object.

How to edit a row in a table using JavaScript?

Code:

<!doctype html>
<html>
<head>
    <title>Create dynamic table in JavaScript</title>
    <style>
       
      .input{
          border:none;
          font-size:10px;
      }
      .input:focus{
          outline:none;
      }
    </style>
    <button onclick="CreateTable()">Create</button>
 
</head>

<body>

  <table id="fetch" border="1/2" cellspacing="1" cellpadding="4">

<script>
var table = document.getElementById('fetch');

var editTB;

function CreateTable(){
        var table = document.getElementById("fetch");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = "Enter your data";
        cell2.innerHTML = "Enter your data";
        cell3.innerHTML = "Enter your data";
        cell4.innerHTML = "Enter your data";
    }

table.onclick = function(event) {
  let target = event.target.closest('.cancel,.ok,td');

  if (!table.contains(target)) return;

  if (target.className == 'cancel') {
    editdone(editTB.elem, false);
  } else if (target.className == 'ok') {
    editdone(editTB.elem, true);
  } else if (target.nodeName == 'TD') {
    if (editTB) return;

    editmode(target);
  }

};

function editmode(td) {
  editTB = {
    elem: td,
    data: td.innerHTML
  };

  td.classList.add('edit-td');

  let textArea = document.createElement('textarea');
  textArea.style.width = td.clientWidth + 'px';
  textArea.style.height = td.clientHeight + 'px';
  textArea.className = 'edit-area';

  textArea.value = td.innerHTML;
  td.innerHTML = '';
  td.appendChild(textArea);
  textArea.focus();

  td.insertAdjacentHTML("beforeEnd",
    '<div class="edit-controls"><button class="ok">OK</button><button class="cancel">CANCEL</button></div>'
  );
}

function editdone(td, isOk) {
  if (isOk) {
    td.innerHTML = td.firstChild.value;
  } else {
    td.innerHTML = editTB.data;
  }
  td.classList.remove('edit-td');
  editTB = null;
}
  </script>

</body>

</html>

Output:

Here, each time we click the Create button a row is added to the HTML page.
We can see that 4 rows are added to the HTML page.
The Create button invokes the function CreateTable() which adds rows to the page in one for each click.

Now we can clearly see that the first cell of the first row is being edited and the value is changed to “My new Data”.
The OK button will update the data in the row.
The CANCEL button will cancel the editing of the row.

Till now we have pretty much covered all the basics of JavaScript along with the basics of HTML with some good examples.

From the next tutorial, we will start building some real-world JavaScript Projects such as Dynamic Webpages and Simple Web Applications.