How to hide HTML table rows if values are 0

Question

I have an HTML table Having 4 columns,Item Code Item Name Category Name and Quantity in which quantity is input field

What i am doing is populating a table with JSON data, initially input fields are set to 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

i want when user clicks to edit the data should be there in input field what user has entered earlier

snippet

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

from where r u getting the data ? database ? when user click on the view only page then filter the data based on your condition from server and populate that in the page — Arunprasanth K V
– Arunprasanth K V, Commented Jan 28, 2019 at 13:01
i can't call from the server,because the quantity is input field which user will @ArunprasanthKV input and save,view is for to check what user has entered,without saving i can't call it from my db, on view i just what to show the rows having non-zero values of quantity so that user can verify — manish thakur
– manish thakur, Commented Jan 28, 2019 at 13:03
ok then you may have to save these values in a variable as json , then filter the data and show only non zero entries. I think u have a table and you need to show the user non zero entries from this table right ? If i understand u correctly then you can read the td elements from the table using table id so read it row by row and create json object and then filter it, or while creating json data you can filter and create then show it wherever u want — Arunprasanth K V
– Arunprasanth K V, Commented Jan 28, 2019 at 13:06
@ArunprasanthKV can you help me with some snippet,i am not getting how to do,and can't be it done without creating new json,can't i do it with css,like i am doing,if i use json so again i have to make new table i don't want to make new table just want to hide rows with zero as value and show non-zero value's row — manish thakur
– manish thakur, Commented Jan 28, 2019 at 13:11
You can do it using css/js also. The simple idea is write a change event in the dropdown and if the selected value is 0 then add a class to the particular row , if its not 0 then do not a class . then finally when user click on the view just hide all tr with our custom class. a solution without json , without extra effect. simple one . — Arunprasanth K V
– Arunprasanth K V, Commented Jan 28, 2019 at 13:22

Sarah · Accepted Answer · 2019-01-28 21:45:28Z

3

Following the structure of the rest of your code I would use the CSS visibility property to hide and show rows.

You could get all the quantity input fields by their className and check if the value is zero or not.

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');
}

answered Jan 28, 2019 at 21:45

Sarah

2,0133 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

manish thakur Over a year ago

i have update my code, i tried what you advised me,but on clicking on view i am hiding view and showing edit button so when user clicks on edit i am calling my addTable function but it resets the data to 0

Sarah Over a year ago

@manishthakur well of course calling the addTable will reset the table coz thats where you are creating the table

Farhang darzi · Accepted Answer · 2019-01-29 12:42:29Z

I modify your code and declare 'itemsQuantiry' variable to keep input values, and add the input value to this variable on each input change, I hope this snipped works as you want.

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>

Patrick Neeteson · Accepted Answer · 2019-01-28 14:03:49Z

0

It seems like you're looking for a pure frontend solution, only hide the rows that have 0 values after user edited the inputs. If you're going to do the call to the server yourself and the "view" button is only some kind of summary, you can easily do something like this:

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

answered Jan 28, 2019 at 14:03

Patrick Neeteson

412 bronze badges

1 Comment

manish thakur Over a year ago

it is working but when again i am changing the dropdown it shows only the non-zero rows after clicking on view it shows non-zero rows but onclicking dropdown it is not shoing full data

Collectives™ on Stack Overflow

How to hide HTML table rows if values are 0

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related