How to Make Html Table Column editable?

Question

I have an HTML table with some JSON Data,I want to make one of my column editable ,like on user click or double click that cell should be editable

i don't have any idea how to achieve that. On searching on google I found that <td contenteditable='true'></td> using this i can make the cells editable but dynamically i don't know how to use it

SNIPPET

 $(document).ready(function() { var tableData = [{ "Category Code": "C001", "Category Name": "Beverages", "Quantity": "3174.0000" }, { "Category Code": "C003", "Category Name": "Juices", "Quantity": "36.0000" }, { "Category Code": "C004", "Category Name": "Soups", "Quantity": "5.0000" }, { "Category Code": "C005", "Category Name": "Cookies", "Quantity": "10.0000" }, { "Category Code": "C006", "Category Name": "Buns", "Quantity": "258.0000" }, { "Category Code": "C007", "Category Name": "Breads", "Quantity": "184.0000" }, { "Category Code": "C008", "Category Name": "Rusks", "Quantity": "62.0000" }, { "Category Code": "C009", "Category Name": "Biscuits", "Quantity": "55.0000" }, { "Category Code": "C010", "Category Name": "Puff", "Quantity": "53.0000" }, { "Category Code": "C011", "Category Name": "Savouries", "Quantity": "343.2500" }, { "Category Code": "C012", "Category Name": "Cake", "Quantity": "19.0000" } ] function addTable(tableValue) { var col = Object.keys(tableValue[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableValue.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); var tabledata = tableValue[i][col[j]]; if (tabledata && !isNaN(tabledata)) { tabledata = parseInt(tabledata).toLocaleString('en-in') } if (tableData[i]['Quantity'] === tableData[i][col[j]]) { //i want to make this cell editable tabCell.innerHTML = tabledata; } else { span = document.createElement("span"); span.innerHTML = tabledata; tabCell.appendChild(span) } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("HourlysalesSummary"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTable(tableData); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <table id="HourlysalesSummary"></table> 

I want to make Quantity Column Data Editable Please anyone out here how can guide me with some good approaches would be very helpfull.

Answer 1

You can use the contenteditable attribute in case of quantity cells:

tabCell.setAttribute('contenteditable', true);

 $(document).ready(function() { var tableData = [{ "Category Code": "C001", "Category Name": "Beverages", "Quantity": "3174.0000" }, { "Category Code": "C003", "Category Name": "Juices", "Quantity": "36.0000" }, { "Category Code": "C004", "Category Name": "Soups", "Quantity": "5.0000" }, { "Category Code": "C005", "Category Name": "Cookies", "Quantity": "10.0000" }, { "Category Code": "C006", "Category Name": "Buns", "Quantity": "258.0000" }, { "Category Code": "C007", "Category Name": "Breads", "Quantity": "184.0000" }, { "Category Code": "C008", "Category Name": "Rusks", "Quantity": "62.0000" }, { "Category Code": "C009", "Category Name": "Biscuits", "Quantity": "55.0000" }, { "Category Code": "C010", "Category Name": "Puff", "Quantity": "53.0000" }, { "Category Code": "C011", "Category Name": "Savouries", "Quantity": "343.2500" }, { "Category Code": "C012", "Category Name": "Cake", "Quantity": "19.0000" } ] function addTable(tableValue) { var col = Object.keys(tableValue[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableValue.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); var tabledata = tableValue[i][col[j]]; if (tabledata && !isNaN(tabledata)) { tabledata = parseInt(tabledata).toLocaleString('en-in') } if (tableData[i]['Quantity'] === tableData[i][col[j]]) { //i want to make this cell editable tabCell.setAttribute('contenteditable', true); // <--- ADDING HERE tabCell.innerHTML = tabledata; } else { span = document.createElement("span"); span.innerHTML = tabledata; tabCell.appendChild(span) } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("HourlysalesSummary"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTable(tableData); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <table id="HourlysalesSummary"></table> 

Another quite often technique used is to hide/show an input inside the cell when needed

Answer 2

You need to add event listener to your cells of table (td) , the event should be double click event (dblclick) , also note that, we have to create a activeCell variable to store, which cell is activated,

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        // to do
    });
}

On event listener's to do code block, you need to make innerHTML of cell 's an input or textarea with JavaScript,

for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        if(this.childElementCount == 0) {
            let input = document.createElement('input');
            input.setAttribute('type', 'textbox');
            input.setAttribute('value', this.innerHTML);
            this.innerHTML = "";
            this.appendChild(input);
            activeCell = this;
        }
    });
}

When user, clicks outside of the activated table cell, save the new value of cell's input and make it back a normal text, with mouseup event listener,

document.addEventListener('mouseup', function(e) {
    if(activeCell != null) {
        let container = activeCell.children[0];
        if (!$(container).is(e.target) && $(container).has(e.target).length === 0) 
        {
            activeCell.innerHTML = container.value;
            activeCell = null;
        }
    }
});

I have used, some methods with JQuery, these are .is and .has for checking the clicked object is not activated cell.

Final code is, look like this,

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        if(this.childElementCount == 0) {
            let input = document.createElement('input');
            input.setAttribute('type', 'textbox');
            input.setAttribute('value', this.innerHTML);
            this.innerHTML = "";
            this.appendChild(input);
            activeCell = this;
        }
    });
}
document.addEventListener('mouseup', function(e) {
    if(activeCell != null) {
        let container = activeCell.children[0];
        if (!$(container).is(e.target) && $(container).has(e.target).length === 0) 
        {
            activeCell.innerHTML = container.value;
            activeCell = null;
        }
    }
});

Have a good day :)

Answer 3

Add the following to the end of script:

  $('.text-right').attr('contenteditable', true); 

 $(document).ready(function() { var tableData = [{ "Category Code": "C001", "Category Name": "Beverages", "Quantity": "3174.0000" }, { "Category Code": "C003", "Category Name": "Juices", "Quantity": "36.0000" }, { "Category Code": "C004", "Category Name": "Soups", "Quantity": "5.0000" }, { "Category Code": "C005", "Category Name": "Cookies", "Quantity": "10.0000" }, { "Category Code": "C006", "Category Name": "Buns", "Quantity": "258.0000" }, { "Category Code": "C007", "Category Name": "Breads", "Quantity": "184.0000" }, { "Category Code": "C008", "Category Name": "Rusks", "Quantity": "62.0000" }, { "Category Code": "C009", "Category Name": "Biscuits", "Quantity": "55.0000" }, { "Category Code": "C010", "Category Name": "Puff", "Quantity": "53.0000" }, { "Category Code": "C011", "Category Name": "Savouries", "Quantity": "343.2500" }, { "Category Code": "C012", "Category Name": "Cake", "Quantity": "19.0000" } ] function addTable(tableValue) { var col = Object.keys(tableValue[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableValue.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); var tabledata = tableValue[i][col[j]]; if (tabledata && !isNaN(tabledata)) { tabledata = parseInt(tabledata).toLocaleString('en-in') } if (tableData[i]['Quantity'] === tableData[i][col[j]]) { //i want to make this cell editable tabCell.innerHTML = tabledata; } else { span = document.createElement("span"); span.innerHTML = tabledata; tabCell.appendChild(span) } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("HourlysalesSummary"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTable(tableData); $('.text-right').attr('contenteditable', true); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <table id="HourlysalesSummary"></table>