html 隐藏值,javascript-如果值为0,如何隐藏HTML表行

我有一个包含4列的HTML表,项目代码项名称类别名称和数量输入字段的数量

我正在用JSON数据填充表,最初将输入字段设置为0

当用户由于大量数据而在输入字段中输入某些内容时,用户想要查看他为此输入的内容,我提供了一个查看按钮,当用户单击该按钮并且我在同一表格中显示所有非零行时,则单击视图后,我将隐藏视图并显示编辑以供用户再次编辑,但是单击输入字段的所有数据后,重置为0

>我想当用户单击以编辑数据时,应该在输入字段中输入用户之前输入的内容

片段

var tableData = [{

"Item Code": "1978","Item Name": "Alu Chat-S","Category Name": "Chats"

},{

"Item Code": "1979","Item Name": "Dahi Alu Chat-S",{

"Item Code": "1980","Item Name": "Samosa-S",{

"Item Code": "1981","Item Name": "SamosaChat-S",{

"Item Code": "1982","Item Name": "Dahi Samosa Chats-S","Category Name": "regular"

},{

"Item Code": "1983","Item Name": "Garam Samosa Chats-S",{

"Item Code": "1984","Item Name": "Kachori Chats-S",{

"Item Code": "1985","Item Name": "Garam Kachori Chat-S",{

"Item Code": "1986","Item Name": "Dahi Kachori Chat-S","Category Name": "fastfood"

},{

"Item Code": "1987","Item Name": "Dai Raj Kachori-S",{

"Item Code": "1988","Item Name": "Baby Kachori Chat-S",{

"Item Code": "1989","Item Name": "Dahi Baby Kachori-S",{

"Item Code": "1990","Item Name": "Anar Bhalla-S",{

"Item Code": "1991","Item Name": "Dahi Bhalla-S",{

"Item Code": "1992","Item Name": "Jhal Muri-S",{

"Item Code": "1993","Item Name": "Chat Platter-S",{

"Item Code": "1994","Item Name": "Dahi Papdi Chat-S","Category Name": "GIFT PACK"

},{

"Item Code": "2402","Item Name": "ALMOND CHBAR",{

"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);

}

Category

All

Chats

regular

fastfood

GIFT PACK

EXEMPTED

---

Save

view

edit

我想当用户点击编辑之前应该在视图之前出现的用户输入的数据