How To Hide Html Table Rows If Values Are 0
I have an HTML table Having 4 columns,Item Code Item Name Category Name and Quantity in which quantity is input field What i am doing is populating a table with JSON data, initiall
Solution 1:
Following the structure of the rest of your code I would use the CSS visibility property to hide and show rows.
You could get all the quantity input fields by their className and check if the value is zero or not.
If its not zero then set the CSS of the item-row to visible. If it IS zero then set the CSS of the item-row to collapse.
functionview(){
//get all quantity input fieldsvar quantityFields = document.getElementsByClassName("dataReset");
//iterate through all quantity input fieldsfor(var i = 0; i < quantityFields.length; i++){
if(quantityFields[i].value != 0){
//if the input value of this quantity field is not equal to zero then find the closest "item-row"//so that we can set this table row to visible
quantityFields[i].closest(".item-row").style.visibility = "visible";
}else{
//if the input value of this quantity field is equal to zero then find the closest "item-row"//so that we can set this table row to collapse
quantityFields[i].closest(".item-row").style.visibility = "collapse";
}
}
//change the value of the select menu to "All"
$('#CategoryName').val('All');
}
Solution 2:
I modify your code and declare 'itemsQuantiry' variable to keep input values, and add the input value to this variable on each input change, I hope this snipped works as you want.
var tableData = [{
"Item Code": "1978",
"Item Name": "Alu Chat-S",
"Category Name": "Chats"
},
{
"Item Code": "1979",
"Item Name": "Dahi Alu Chat-S",
"Category Name": "Chats"
},
{
"Item Code": "1980",
"Item Name": "Samosa-S",
"Category Name": "Chats"
},
{
"Item Code": "1981",
"Item Name": "SamosaChat-S",
"Category Name": "Chats"
},
{
"Item Code": "1982",
"Item Name": "Dahi Samosa Chats-S",
"Category Name": "regular"
},
{
"Item Code": "1983",
"Item Name": "Garam Samosa Chats-S",
"Category Name": "regular"
},
{
"Item Code": "1984",
"Item Name": "Kachori Chats-S",
"Category Name": "regular"
},
{
"Item Code": "1985",
"Item Name": "Garam Kachori Chat-S",
"Category Name": "regular"
},
{
"Item Code": "1986",
"Item Name": "Dahi Kachori Chat-S",
"Category Name": "fastfood"
},
{
"Item Code": "1987",
"Item Name": "Dai Raj Kachori-S",
"Category Name": "fastfood"
},
{
"Item Code": "1988",
"Item Name": "Baby Kachori Chat-S",
"Category Name": "fastfood"
},
{
"Item Code": "1989",
"Item Name": "Dahi Baby Kachori-S",
"Category Name": "fastfood"
},
{
"Item Code": "1990",
"Item Name": "Anar Bhalla-S",
"Category Name": "fastfood"
},
{
"Item Code": "1991",
"Item Name": "Dahi Bhalla-S",
"Category Name": "fastfood"
},
{
"Item Code": "1992",
"Item Name": "Jhal Muri-S",
"Category Name": "fastfood"
},
{
"Item Code": "1993",
"Item Name": "Chat Platter-S",
"Category Name": "fastfood"
},
{
"Item Code": "1994",
"Item Name": "Dahi Papdi Chat-S",
"Category Name": "GIFT PACK"
}
];
var itemsQuantiry = [];
functionaddTable(tableData) {
var col = Object.keys(tableData[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.var colNum = col.length; //to improve the speedfor (var i = 0; i < colNum + 1; i++) {
var th = document.createElement("th"); // TABLE HEADER.if (i >= colNum) {
th.innerHTML = "Quantity";
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head");
} else {
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head");
}
}
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
tr.classList.add("item-row");
for (var j = 0; j < col.length + 1; j++) {
//here i am adding a class with the name of the category to each items row.var categoryName = tableData[i]["Category Name"];
tr.dataset.category = categoryName;
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var quantityField = document.createElement("input");
var tabledata = tableData[i][col[j]];
if (i > -1 && j >= colNum) {
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "Quantity");
quantityField.setAttribute("autocomplete", "on");
if(itemsQuantiry[i]) {
quantityField.setAttribute("value", itemsQuantiry[i]);
}
else {
quantityField.setAttribute("value", "0");
}
quantityField.setAttribute("index", i);
quantityField.setAttribute("type", "number");
quantityField.setAttribute("required", "required");
quantityField.classList.add("dataReset");
quantityField.toLocaleString('en-IN');
tabCell.appendChild(quantityField);
} else {
if (tableData[i]["Item Code"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Item_Code");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]["Item Name"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Item_Name");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Category_Name");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
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");
$("#view").on("click", function() {
var itemRows = document.getElementsByClassName("item-row");
if (quantityField === 0) {
tabCell.innerHTML = tabledata.hide();
}
/* $("#HourlysalesSummary tr td").filter(function(){
return $(this).text() == 0;
}).hide(); */
});
}
addTable(tableData);
var selectedOption = "";
$(".dataReset").on("change", function(e) {
itemsQuantiry[$(this).attr('index')] = e.target.value;
});
$("#CategoryName").on("change", function(e) {
selectedOption = this.value;
//getting all item rows so i can target them.var itemRows = document.getElementsByClassName("item-row");
if (selectedOption === "All") {
//If "All" then style all rows with visibility: visible.for (var i = 0; i < itemRows.length; i++) {
itemRows[i].style.visibility = "visible";
}
} else {
//If the selectedOption is anything other than "All",// firstly i am style all rows with visibility: collapsefor (var i = 0; i < itemRows.length; i++) {
itemRows[i].style.visibility = "collapse";
}
/* alert(itemRows); */// then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");
for (var i = 0; i < selectedItemRows.length; i++) {
selectedItemRows[i].style.visibility = "visible";
}
}
});
functionview() {
//get all quantity input fieldsvar quantityFields = document.getElementsByClassName("dataReset");
//iterate through all quantity input fieldsfor (var i = 0; i < quantityFields.length; i++) {
if (quantityFields[i].value != 0) {
//if the input value of this quantity field is not equal to zero then find the closest "item-row"//so that we can set this table row to visible
quantityFields[i].closest(".item-row").style.visibility = "visible";
} else {
//if the input value of this quantity field is equal to zero then find the closest "item-row"//so that we can set this table row to collapse
quantityFields[i].closest(".item-row").style.display = "none";
}
}
//change the value of the select menu to "All"
$('#CategoryName').val('All');
$('#see').hide();
$('#edit').show();
}
functionedit1() {
addTable(tableData);
}<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"><divclass="container"id="divHide"><formid="indentForm"autocomplete="on"><divclass="row position-relative"><divclass="col-lg-4"><h5id="commonHeader">Category</h5><selectclass="test"id="CategoryName"name="categoryCode"><option>All</option><option>Chats</option><option>regular</option><option>fastfood</option><option>GIFT PACK</option><option>EXEMPTED</option></select></div></div><hrstyle="border: 1px solid black"><divclass="table-responsive"><tableclass="w-100"id="HourlysalesSummary"></table></div><div><buttontype="submit"id="save">
Save
</button><buttonid="see"type="button"onclick="view()">view</button><buttonid="edit"type="button"onclick="edit1()"style="display:none">edit</button></div></form></div>Solution 3:
It seems like you're looking for a pure frontend solution, only hide the rows that have 0 values after user edited the inputs. If you're going to do the call to the server yourself and the "view" button is only some kind of summary, you can easily do something like this:
$('table tr').each(function(){
$(this).toggle($(this).find($('.dataReset')).val() != 0) })
Post a Comment for "How To Hide Html Table Rows If Values Are 0"