Editable table Column

double click on any cell and make it editable.

by Anand Jee

HTML

<h1>Editable Cell</h1>

<hr>
<table id="myTable">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tr>
        <td>ANJYR</td>
        <td><div></div></td>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>Varshney</td>
    </tr>
    <tr>
        <td>Ritesh</td>
        <td>Deshmukh</td>
    </tr>
    <tr>
        <td>Vikesh</td>
        <td>Juyal</td>
    </tr>
</table>
<div></div>

CSS

body{font-family: calibri;font-size: 12px;}
table#myTable{border-collapse:collapse;}
table#myTable tr td,table tr th {padding: 4px 10px;border: 1px solid #ddd;}

JavaScript

//Editable Cell
var table = document.getElementById("myTable");
table.addEventListener('click', function(e) {

    var target = e.target;
    //test if clicked element is TD.
    if (target && target.tagName && target.tagName.toLowerCase() == "td")
    {
        //make cell editable
        target.setAttribute('contenteditable', 'true');
        //on blur close the editable field and return to normal cell.
        target.onblur = function(){this.setAttribute('contenteditable');}
    }

});