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