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=".3.1/jquery.min.js"></script>
<link rel="stylesheet" href=".1.2/css/bootstrap.min.css">
<script src=".1.2/js/bootstrap.min.js"></script>
<table id="HourlysalesSummary"></table>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./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.

• javascript
• jquery
• html

• a quite often used technique is to have an input field inside the cell which is not visible, and then show/hide it when needed. Otherwise You also have the contenteditable attribute on some html tags – quirimmo Commented Jan 9, 2019 at 8:04
• just read now. It looks like someone already provided you also with that example so no need of it :) – quirimmo Commented Jan 9, 2019 at 8:27

3 Answers 3

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./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

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 :)

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="HourlysalesSummary"></table>