如果值为0，如何隐藏HTML表行

Question

我有一个HTML表有4列，Item Code Item Name Category Name和Quantity，其中数量是输入字段

我正在做的是用JSON数据填充表，最初输入字段设置为0

当用户输入某些东西进入输入字段时由于大量数据用户想要查看他输入的内容我已经提供了view按钮，当用户点击该按钮并且我在同一个表中显示所有non-zero行时，则点击后view我隐藏view并显示edit供用户再次编辑，但点击输入字段的所有数据重置为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>

我希望当用户点击编辑之前用户输入的数据之前，应该存在视图

Answer 1

按照其余代码的结构，我将使用CSS visibility属性来隐藏和显示行。

您可以通过其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');
}

Answer 2

我修改你的代码并声明'itemsQuantiry'变量以保持输入值，并在每个输入变化时将输入值添加到此变量，我希望这个剪切可以按你的意愿工作。

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 = [];
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");
        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: 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>

Answer 3

看起来您正在寻找纯前端解决方案，只在用户编辑输入后隐藏具有0值的行。如果您要自己打电话给服务器而“视图”按钮只是某种摘要，您可以轻松地执行以下操作：

$('table tr').each(function(){
  $(this).toggle($(this).find($('.dataReset')).val() != 0) })