如果值为0，如何隐藏HTML表行 [英] How to hide HTML table rows if values are 0
本文介绍了如果值为0，如何隐藏HTML表行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个HTML表有4列，项目代码 项目名称 类别名称和数量，其中输入数量字段
I have an HTML table Having 4 columns,Item Code Item Name Category Name and Quantity in which quantity is input field
我正在做的是填写一个具有JSON数据的表，最初输入字段设置为0
What i am doing is populating a table with JSON data, initially input fields are set to 0
当用户由于大量数据而输入某些内容时，用户希望查看他为此输入的内容当用户点击该按钮并且我显示所有非零行时，我提供了视图按钮表，然后点击查看我隐藏查看并显示编辑让用户再次编辑，但点击输入字段的所有数据重置为0
When user inputs something into input field due to large amount of data user wants to view what he has entered for that i have provided a view button, when user clicks on that button and i am showing all non-zero rows in same table,then after clicking view i am hiding view and displaying edit for user to edit again, but on clicking all the data of input fields resets to 0
- 我希望当用户点击编辑数据应该在输入字段中，用户之前输入的内容
代码段
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"
},
{
"Item Code": "2402",
"Item Name": "ALMOND CHBAR",
"Category Name": "GIFT PACK"
},
{
"Item Code": "333",
"Item Name": "A BR SB EX",
"Category Name": "EXEMPTED"
},
{
"Item Code": "603",
"Item Name": "AMUL FRESH CREAM",
"Category Name": "EXEMPTED"
}
]
function addTable(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 speed
for (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");
quantityField.setAttribute("value", "0");
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 = "";
$("#CategoryName").on("change", function() {
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: collapse
for (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";
}
}
});
function view() {
//get all quantity input fields
var quantityFields = document.getElementsByClassName("dataReset");
//iterate through all quantity input fields
for (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();
}
function edit1() {
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">
<div class="container" id="divHide">
<form id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="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>
<hr style="border: 1px solid black">
<div class="table-responsive">
<table class="w-100" id=HourlysalesSummary></table>
</div>
<div>
<button type="submit" id="save">
Save
</button>
<button id="see" type="button" onclick="view()">view</button>
<button id="edit" type="button" onclick="edit1()" style="display:none">edit</button>
</div>
</form>
</div>
我想什么时候用户点击编辑用户在查看之前输入的数据
I want when user clicks on edit the data entered by user earlier before view should be there
推荐答案
遵循其余代码的结构我将使用CSS visibility属性来隐藏和显示行。
Following the structure of the rest of your code I would use the CSS visibility property to hide and show rows.
您可以通过className获取所有数量输入字段，并检查该值是否为零。
You could get all the quantity input fields by their className and check if the value is zero or not.
如果它不为零，则将项目行的CSS设置为可见。
如果它为零，则设置项目的CSS-行崩溃。
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.
function view(){
//get all quantity input fields
var quantityFields = document.getElementsByClassName("dataReset");
//iterate through all quantity input fields
for(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');
}
这篇关于如果值为0，如何隐藏HTML表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
