我有一个包含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);}<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 ID="divHIDe"> <form ID="indentForm" autocomplete="on"> <div > <div > <h5 ID="commonheader">category</h5> <select 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 > <div > <table 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()" >edit</button> </div> </form></div>我想当用户点击编辑之前应该在视图之前出现的用户输入的数据最佳答案按照其余代码的结构,我将使用CSS可见性属性来隐藏和显示行.
您可以通过它们的classname获取所有数量输入字段,并检查该值是否为零.
如果其不为零,则将项目行的CSS设置为可见.
如果它为零,则将项目行的CSS设置为折叠.
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');}以上是内存溢出为你收集整理的javascript-如果值为0,如何隐藏HTML表行 全部内容，希望文章能够帮你解决javascript-如果值为0,如何隐藏HTML表行 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）