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

HTML 前端之家
前端之家收集整理的这篇文章主要介绍了javascript-如果值为0,如何隐藏HTML表行 ，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

片段

  1. var tableData = [{
  2.     "Item Code": "1978","Item Name": "Alu Chat-S","Category Name": "Chats"
  3.   },{
  4.     "Item Code": "1979","Item Name": "Dahi Alu Chat-S",{
  5.     "Item Code": "1980","Item Name": "Samosa-S",{
  6.     "Item Code": "1981","Item Name": "SamosaChat-S",{
  7.     "Item Code": "1982","Item Name": "Dahi Samosa Chats-S","Category Name": "regular"
  8.   },{
  9.     "Item Code": "1983","Item Name": "Garam Samosa Chats-S",{
  10.     "Item Code": "1984","Item Name": "Kachori Chats-S",{
  11.     "Item Code": "1985","Item Name": "Garam Kachori Chat-S",{
  12.     "Item Code": "1986","Item Name": "Dahi Kachori Chat-S","Category Name": "fastfood"
  13.   },{
  14.     "Item Code": "1987","Item Name": "Dai Raj Kachori-S",{
  15.     "Item Code": "1988","Item Name": "Baby Kachori Chat-S",{
  16.     "Item Code": "1989","Item Name": "Dahi Baby Kachori-S",{
  17.     "Item Code": "1990","Item Name": "Anar Bhalla-S",{
  18.     "Item Code": "1991","Item Name": "Dahi Bhalla-S",{
  19.     "Item Code": "1992","Item Name": "Jhal Muri-S",{
  20.     "Item Code": "1993","Item Name": "Chat Platter-S",{
  21.     "Item Code": "1994","Item Name": "Dahi Papdi Chat-S","Category Name": "GIFT PACK"
  22.   },{
  23.     "Item Code": "2402","Item Name": "ALMOND CHBAR",{
  24.     "Item Code": "333","Item Name": "A BR SB EX","Category Name": "EXEMPTED"
  25.   },{
  26.     "Item Code": "603","Item Name": "AMUL FRESH CREAM","Category Name": "EXEMPTED"
  27.   }
  28. ]
  30. function addTable(tableData) {
  31.   var col = Object.keys(tableData[0]);
  32.   var countNum = col.filter(i => !isNaN(i)).length;
  33.   var num = col.splice(0,countNum);
  34.   col = col.concat(num);
  35.   var table = document.createElement("table");
  36.   var tr = table.insertRow(-1); // TABLE ROW.
  37.   var colNum = col.length; //to improve the speed
  39.   for (var i = 0; i < colNum + 1; i++) {
  40.     var th = document.createElement("th"); // TABLE HEADER.
  41.     if (i >= colNum) {
  42.       th.innerHTML = "Quantity";
  43.       tr.appendChild(th);
  44.       tr.classList.add("text-center");
  45.       tr.classList.add("head");
  46.     } else {
  47.       th.innerHTML = col[i];
  48.       tr.appendChild(th);
  49.       tr.classList.add("text-center");
  50.       tr.classList.add("head");
  51.     }
  52.   }
  53.   for (var i = 0; i < tableData.length; i++) {
  54.     tr = table.insertRow(-1);
  55.     tr.classList.add("item-row");
  56.     for (var j = 0; j < col.length + 1; j++) {
  57.       //here i am adding a class with the name of the category to each items row.
  58.       var categoryName = tableData[i]["Category Name"];
  59.       tr.dataset.category = categoryName;
  61.       let tabCell = tr.insertCell(-1);
  62.       var hiddenField = document.createElement("input");
  63.       hiddenField.style.display = "none";
  64.       var quantityField = document.createElement("input");
  65.       var tabledata = tableData[i][col[j]];
  66.       if (i > -1 && j >= colNum) {
  68.         quantityField.style.border = "none";
  69.         quantityField.style["text-align"] = "right";
  70.         quantityField.setAttribute("name","Quantity");
  71.         quantityField.setAttribute("autocomplete","on");
  72.         quantityField.setAttribute("value","0");
  73.         quantityField.setAttribute("type","number");
  74.         quantityField.setAttribute("required","required");
  75.         quantityField.classList.add("dataReset");
  76.         quantityField.toLocaleString('en-IN');
  77.         tabCell.appendChild(quantityField);
  78.       } else {
  79.         if (tableData[i]["Item Code"] === tableData[i][col[j]]) {
  80.           tabCell.innerHTML = tabledata;
  81.           hiddenField.setAttribute("name","Item_Code");
  82.           hiddenField.setAttribute("value",tabledata);
  83.           tabCell.appendChild(hiddenField);
  84.         }
  85.         if (tableData[i]["Item Name"] === tableData[i][col[j]]) {
  86.           tabCell.innerHTML = tabledata;
  87.           hiddenField.setAttribute("name","Item_Name");
  88.           hiddenField.setAttribute("value",tabledata);
  89.           tabCell.appendChild(hiddenField);
  90.         }
  92.         if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
  93.           tabCell.innerHTML = tabledata;
  94.           hiddenField.setAttribute("name","Category_Name");
  95.           hiddenField.setAttribute("value",tabledata);
  96.           tabCell.appendChild(hiddenField);
  97.         }
  98.         if (j > 1) tabCell.classList.add("text-right");
  99.       }
  100.     }
  102.   }
  103.   var divContainer = document.getElementById("HourlysalesSummary");
  104.   divContainer.innerHTML = "";
  105.   divContainer.appendChild(table);
  106.   table.classList.add("table");
  107.   table.classList.add("table-striped");
  108.   table.classList.add("table-bordered");
  109.   table.classList.add("table-hover");
  110.   $("#view").on("click",function() {
  111.     var itemRows = document.getElementsByClassName("item-row");
  112.     if (quantityField === 0) {
  113.       tabCell.innerHTML = tabledata.hide();;
  115.     }
  116.     /* 	$("#HourlysalesSummary tr td").filter(function(){
  117.     		  return $(this).text() == 0;   
  118.     		}).hide(); */
  120.   });
  121. }
  123. addTable(tableData);
  124. var selectedOption = "";
  125. $("#CategoryName").on("change",function() {
  126.   selectedOption = this.value;
  127.   //getting all item rows so i can target them.
  128.   var itemRows = document.getElementsByClassName("item-row");
  130.   if (selectedOption === "All") {
  131.     //If "All" then style all rows with visibility: visible.
  132.     for (var i = 0; i < itemRows.length; i++) {
  133.       itemRows[i].style.visibility = "visible";
  134.     }
  135.   } else {
  136.     //If the selectedOption is anything other than "All",// firstly i am style all rows with visibility: collapse
  137.     for (var i = 0; i < itemRows.length; i++) {
  138.       itemRows[i].style.visibility = "collapse";
  140.     }
  141.     /* alert(itemRows); */
  142.     // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.
  143.     var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");
  145.     for (var i = 0; i < selectedItemRows.length; i++) {
  146.       selectedItemRows[i].style.visibility = "visible";
  147.     }
  148.   }
  150. });
  152. function view() {
  153.   //get all quantity input fields
  154.   var quantityFields = document.getElementsByClassName("dataReset");
  155.   //iterate through all quantity input fields
  156.   for (var i = 0; i < quantityFields.length; i++) {
  157.     if (quantityFields[i].value != 0) {
  158.       //if the input value of this quantity field is not equal to zero then find the closest "item-row"
  159.       //so that we can set this table row to visible
  160.       quantityFields[i].closest(".item-row").style.visibility = "visible";
  161.     } else {
  162.       //if the input value of this quantity field is equal to zero then find the closest "item-row"
  163.       //so that we can set this table row to collapse
  164.       quantityFields[i].closest(".item-row").style.display = "none";
  165.     }
  166.   }
  167.   //change the value of the select menu to "All"
  168.   $('#CategoryName').val('All');
  169.   $('#see').hide();
  170.   $('#edit').show();
  173. }
  175. function edit1() {
  176.   addTable(tableData);
  179. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
  3. <div class="container" id="divHide">
  4.   <form id="indentForm" autocomplete="on">
  5.     <div class="row position-relative">
  7.       <div class="col-lg-4">
  8.         <h5 id="commonHeader">Category</h5>
  9.         <select class="test" id="CategoryName" name="categoryCode">
  10.           <option>All</option>
  11.           <option>Chats</option>
  12.           <option>regular</option>
  13.           <option>fastfood</option>
  14.           <option>GIFT PACK</option>
  15.           <option>EXEMPTED</option>
  16.         </select>
  17.       </div>
  18.     </div>
  19.     <hr style="border: 1px solid black">
  20.     <div class="table-responsive">
  21.       <table class="w-100" id=HourlysalesSummary></table>
  22.     </div>
  23.     <div>
  24.       <button type="submit" id="save">
  25. 					 Save
  26. 				</button>
  27.       <button id="see" type="button" onclick="view()">view</button>
  28.       <button id="edit" type="button" onclick="edit1()" style="display:none">edit</button>
  30.     </div>
  31.   </form>
  32. </div>

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

最佳答案
按照其余代码的结构,我将使用CSS可见性属性来隐藏和显示行.

您可以通过它们的className获取所有数量输入字段,并检查该值是否为零.

如果其不为零,则将项目行的CSS设置为可见.
如果它为零,则将项目行的CSS设置为折叠.

  1. function view(){
  2.   //get all quantity input fields
  3.   var quantityFields = document.getElementsByClassName("dataReset");
  4.   //iterate through all quantity input fields
  5.   for(var i = 0; i < quantityFields.length; i++){
  6.     if(quantityFields[i].value != 0){
  7.       //if the input value of this quantity field is not equal to zero then find the closest "item-row"
  8.       //so that we can set this table row to visible
  9.       quantityFields[i].closest(".item-row").style.visibility = "visible";
  10.     }else{
  11.       //if the input value of this quantity field is equal to zero then find the closest "item-row"
  12.       //so that we can set this table row to collapse
  13.       quantityFields[i].closest(".item-row").style.visibility = "collapse";
  14.     }
  15.   }
  16.   //change the value of the select menu to "All"
  17.   $('#CategoryName').val('All');
  18. }

猜你在找的HTML相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.di...
echarts中legend如何换行
lengend data数据中若存在&#39;&#39;，则表示换行，用&#39;&#39;切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { t...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var d...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种...
【前端JSP思考】JSP中#{},${}和%{}的区别
JSP中#{},${}和%{}的区别： # #{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQ...
【前端HTML】常用标签及属性
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一...
[前端]GOFLY项目-响应式登录页的设计和实现
登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用 宽度一般都是按百分比...
[前端] 设定为disabled的表单域值不能被提交
表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。 但是我们需要提交这个...
[前端] 代码中执行绑定元素的指定事件trigger方法
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作