2

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.

  • 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 Jan 09 '19 at 08:04
  • just read now. It looks like someone already provided you also with that example so no need of it :) – quirimmo Jan 09 '19 at 08:27

3 Answers3

4

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

quirimmo
  • 9,800
  • 3
  • 30
  • 45
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 :)

Muhammed Çağlar TUFAN
  • 69
  • 8
  • hey i have tried your code its working fine but the issue is on click it becomes a input field but when i press `tab` or by mouse clicking on new cell to edit that the first one doesn't get back to cell rather then input field –  Jan 09 '19 at 08:21
  • on clicking inside the input field `` this is showing. –  Jan 09 '19 at 08:29
  • I just wanted to tell you, which approach you should follow. Other things is to your work. After here, you need to detect clicking outside the input event and when this event is fired, you need to innerText of cell to value of input and remove element of input. – Muhammed Çağlar TUFAN Jan 09 '19 at 08:36
  • Okay, it will be here with updating the answer @dheerajkumar – Muhammed Çağlar TUFAN Jan 09 '19 at 09:16
1

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • that's pretty error prone. `text-right` is used by bootstrap for aligning text to the right. In this way you will make all those elements editable – quirimmo Jan 09 '19 at 08:37