Create Editable HTML table using JavasSript

Some days before i was surfing different sites and groups. There i saw post related to editable HTML table.
I write out this tutorial for beginners who want to learn basic things about HTML and JavaScript.

Firstly, i create a HTML table like this:

 Lets Check working  of above HTML table. At that stage, all fields in html table are readonly, means one can only read and view it unless user presses EDIT button at the end of each row.

When user press Edit button, html table respond like this:

Now i am replacing existing fields values of ist row with new values, and press SAVE button like this:

As you can see field values of first row are saved. Its just a tricky game which i play here.

Its time to check out backend code. How its works? and How table row editable and non-editable by pressing EDIT and SAVE button simultaneously.

Q.  How rows turn out editable when press EDIT button?

First, we have to dig out the html code. Here is HTML code of first row input fields:

<tr> <td width="50"><input readonly="readonly" id="name1" value="name1" type="text"/></td>
 <td><input readonly="readonly" id="year1" value="year1" type="text"/></td>
 <td><input readonly="readonly" id="dept1" value="dept1" type="text"/></td>
 <td><input id="1" value="Edit" onclick="return onEdit(this)"; type="button"/></td>
 </tr>

In above HTML code, all input fields are Read only. In JavaScript, all working is done using fields Id and Name attributes. As i used  

id="name1" value="name1"

for first row and first column field. Here, i used numbers with each field of each row. For First row i write id="name1" , for second row id="name2" and so on.
Same thing for other fields of first to last row of table.

Now when one presses EDIT button, it calls JavaScript method "onEdit(this)". Here "this" keyword represents EDIT button itself.

JavaScript Method Code:

function onEdit(btn)
{
    var id=btn.id;
    if(btn.value=="Edit")
    {
    document.getElementById('name'+id).removeAttribute("Readonly");
    document.getElementById('year'+id).removeAttribute("Readonly");
    document.getElementById('dept'+id).removeAttribute("Readonly");
    document.getElementById(id).value="Save";
    return false;
    }
    if(btn.value=="Save")
    {
    document.getElementById('name'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('year'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('dept'+id).setAttribute("Readonly" , "readonly");
    document.getElementById(id).value="Edit";
     return false;
    }
   
}

When  one presses EDIT button, JavaScript method onEdit call and execution pass to it.This method gets ID of button, as i pressed Edit button of first row, here id="1".
In above function this works like this:

var id=btn.id;

replaced by  

var id=1;

Now its check value attribute of button which we pressed,  as in this case button value is edit. So first if condition works.

if(btn.value=="Edit") -> this condition evaluates true

Now this function remove readonly attribute of all fields of first row like:

document.getElementById('name'+id).removeAttribute("Readonly");
document.getElementById('year'+id).removeAttribute("Readonly");
document.getElementById('dept'+id).removeAttribute("Readonly");

 .removeAttribute is JavaScript function. Read in detail from here. It removes particular attribute of the  field by getting id of that field. In above code

document.getElementById('name'+id).removeAttribute("Readonly");

is replaced by this one:

document.getElementById('name1').removeAttribute("Readonly");

Now check how value of button changes, after pressing EDIT button. After removing readonly attribute, code comes at this line:

document.getElementById(id).value="Save";

here id =1 so it looks like this:

document.getElementById(1).value="Save";

Above code line change value of EDIT button. After if conditon if(btn.value=="Edit")
HTML table looks like this:

Its all about edit functionality of HTML table. Now next step to learn about save functionality button.

Q. How rows turn out non-editable when press SAVE button?

After Pressing Edit button of first row of table, html code changed, because of onEdit function execution. Now first row looks like:

<tr> <td width="50"><input id="name1" value="name1" type="text"/></td>
<td><input id="year1" value="year1" type="text"/></td>
<td><input id="dept1" value="dept1" type="text"/></td>
<td><input id="1" value="Save" onclick="return onEdit(this)" type="button"/></td>
</tr>

In above HTML code, all input fields attribute readonly is removed. Now all fields of first are editable for inserting new values.As i replaced values of input fields with new values.Now when one presses SAVE button, it calls JavaScript method "onEdit(this)". This method gets ID of button, as i pressed SAVE button of first row, here id="1".
In above function this works like this:

var id=btn.id;

replaced by  

var id=1;

Now its check value attribute of button which we pressed,  as in this case button value is SAVE.
Here second if condition works.

if(btn.value=="Save") -> this condition evaluates true

Now this function add readonly attribute of all fields of first row like:

document.getElementById('name'+id).setAttribute("Readonly" , "readonly");
document.getElementById('year'+id).setAttribute("Readonly" , "readonly");
document.getElementById('dept'+id).setAttribute("Readonly" , "readonly");

 .setAttribute is JavaScript function. Read in detail from here. It adds particular attribute of the field by getting id of that field. In above code

document.getElementById('name'+id).setAttribute("Readonly" , "readonly");

is replaced by this one:

document.getElementById('name1').setAttribute("Readonly" , "readonly");

as id =1. Now check how value of button changes, after pressing SAVE button. After adding readonly attribute, code comes at this line:

document.getElementById(id).value="Save";

here id =1 so it looks like this:

document.getElementById(1).value="Edit";

Above code line change value of SAVE button. After if conditon if(btn.value=="Save").
HTML table looks like this:

This tutorial is all about HTML and JavaScript working. Hope this 'll help beginners in learning.

Give me your feed back and thanks for visiting my blog.:)

 Download this example from here.