CODEWITHSUNDEEP
javascriptjqueryhtml
user10561216
user10561216

Reputation:

How to Make Html Table Column editable?

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.

Upvotes: 2

Views: 9513

Answers (3)

Muhammed &#199;ağlar TUFAN
Muhammed &#199;ağlar TUFAN

Reputation: 69

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

Upvotes: 2

zer00ne
zer00ne

Reputation: 44118

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>

Upvotes: 1

quirimmo
quirimmo

Reputation: 9998

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

Upvotes: 4

Related Questions