stackoom
  简体   繁体   中英

HTML table to Loop Through each row

 原文  2019-03-25 05:43:30  2   4    javascript/ jquery/ html

Question

I have a HTML table which have a input field by default it is 0 initially, what I am doing is I am saving all the Items which have a value greater than 0, so it is working fine, but at UI end what i want to do is when user initially loads the page it shows up HTML table with one column having input field and values as 0 , so if user clicks on save without entering any value in input field then I am trying to prompt an alert quantity field value should be greater then 0 , but when I am doing this it is only checking for 1st row

Code

 var tableDataDraft = [ { "Code": "1248", "Item Name": "Tandoori Roti", "Selling Price": "45.0000", "Qty": "0" }, { "Code": "1249", "Item Name": "Naan-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1250", "Item Name": "Naan-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1251", "Item Name": "Naan-Garlic", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1252", "Item Name": "Kulcha-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1253", "Item Name": "Kulcha-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1254", "Item Name": "Kulcha-Amritsari", "Selling Price": "65.0000", "Qty": "0" }, { "Code": "1255", "Item Name": "Kulcha-Punjabi", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1256", "Item Name": "Kulcha-Jaipuar", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1257", "Item Name": "Paratha-Aloo", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1258", "Item Name": "Paratha-Methi", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1259", "Item Name": "Paratha-Pudina", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1260", "Item Name": "Paratha-Lacha", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "603", "Item Name": "AMUL FRESH CREAM", "Selling Price": "134.8700", "Qty": "0" } ] var itemsQuantiry1 = []; function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[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); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length; j++) { var categoryName = tableDataDraft[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Selling_Price'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Outlet_Id'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Qty'] === tableDataDraft[i][col[j]]) { tabCell.classList.add("dheeraj") var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity_field"); quantityField.setAttribute("autocomplete", "on"); if (itemsQuantiry1[i]) { quantityField.setAttribute("value", itemsQuantiry1[i]); } else { quantityField.setAttribute("value", tabledata); } quantityField.setAttribute("index", i); quantityField.setAttribute("type", "number"); quantityField.setAttribute("min", "0"); quantityField.setAttribute("max", "999"); // quantityField.setAttribute("onfocus", "this.value=''"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("indentTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) $("#save").click(function() { var emptyQuantity = $(".dataReset").val(); //on click of save want to check quantity field should be greater then zero if (emptyQuantity === '0') { alert("Quantity field Value Should be greater then 0"); } });
 <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"> <button type="button" id="save" class="commonButton"> <i class="fas fa-save"></i>&nbsp;Save </button> <div class="table-responsive"> <table id="indentTable" class="table table-bordered table-hover "> </table> </div>

So what I want to achieve is

  • If any Quantity field has value greater then 0 then i can allow user to save data,but if all the input fields have value 0 in each row then trying to prompt message
  • Currently what it is doing it only checks 1st row if it has value greater then zero then it saves data otherwise prompt mesage
  • So in case when user let 1st row data be zero and other data He/She entered any thing then it is checking only First Row

i have commented the Save button code in my snippet

Any kind of help or approach will be appreciated,Thankyou

4 answers

solution1
 1  2019-03-25 06:01:34

You can try keeping it in a loop, so that it checks for each such row having a value 1 also once it is found we need to break the each loop after your alert . 

 var tableDataDraft = [ { "Code": "1248", "Item Name": "Tandoori Roti", "Selling Price": "45.0000", "Qty": "0" }, { "Code": "1249", "Item Name": "Naan-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1250", "Item Name": "Naan-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1251", "Item Name": "Naan-Garlic", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1252", "Item Name": "Kulcha-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1253", "Item Name": "Kulcha-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1254", "Item Name": "Kulcha-Amritsari", "Selling Price": "65.0000", "Qty": "0" }, { "Code": "1255", "Item Name": "Kulcha-Punjabi", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1256", "Item Name": "Kulcha-Jaipuar", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1257", "Item Name": "Paratha-Aloo", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1258", "Item Name": "Paratha-Methi", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1259", "Item Name": "Paratha-Pudina", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1260", "Item Name": "Paratha-Lacha", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "603", "Item Name": "AMUL FRESH CREAM", "Selling Price": "134.8700", "Qty": "0" } ] var itemsQuantiry1 = []; function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[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); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length; j++) { var categoryName = tableDataDraft[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Selling_Price'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Outlet_Id'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Qty'] === tableDataDraft[i][col[j]]) { tabCell.classList.add("dheeraj") var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity_field"); quantityField.setAttribute("autocomplete", "on"); if (itemsQuantiry1[i]) { quantityField.setAttribute("value", itemsQuantiry1[i]); } else { quantityField.setAttribute("value", tabledata); } quantityField.setAttribute("index", i); quantityField.setAttribute("type", "number"); quantityField.setAttribute("min", "0"); quantityField.setAttribute("max", "999"); // quantityField.setAttribute("onfocus", "this.value=''"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("indentTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) $("#save").click(function() { $(".dataReset").each(function(){ var emptyQuantity = $(this).val(); //on click of save want to check quantity field should be greater then zero if (emptyQuantity === '0') { alert("Quantity field Value Should be greater then 0"); return false; } }); }); 
 <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"> <button type="button" id="save" class="commonButton"> <i class="fas fa-save"></i>&nbsp;Save </button> <div class="table-responsive"> <table id="indentTable" class="table table-bordered table-hover "> </table> </div>

Hope this helps you.

solution2
 0  2019-03-25 06:01:20

You have multiple cells, and it is unclear what you expected a single val() would be - consider the fact you are comparing against 0 once, with no loop. A slight modification to the click function will fix this - loop all cells, and check each one's value. This is the most straightforward solution. Below I added a solution using is which seems suited here. 

 var tableDataDraft = [ { "Code": "1248", "Item Name": "Tandoori Roti", "Selling Price": "45.0000", "Qty": "0" }, { "Code": "1248", "Item Name": "Tandoori Roti", "Selling Price": "45.0000", "Qty": "0" } ] var itemsQuantiry1 = []; function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[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); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length; j++) { var categoryName = tableDataDraft[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Selling_Price'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Outlet_Id'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Qty'] === tableDataDraft[i][col[j]]) { tabCell.classList.add("dheeraj") var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity_field"); quantityField.setAttribute("autocomplete", "on"); if (itemsQuantiry1[i]) { quantityField.setAttribute("value", itemsQuantiry1[i]); } else { quantityField.setAttribute("value", tabledata); } quantityField.setAttribute("index", i); quantityField.setAttribute("type", "number"); quantityField.setAttribute("min", "0"); quantityField.setAttribute("max", "999"); // quantityField.setAttribute("onfocus", "this.value=''"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("indentTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) $("#save").click(function() { var success = false; $('.dataReset').each(function(i, obj) { if (obj.value > 0) { success = true; return false //Once is enough } }); if(!success) alert("Quantity field Value Should be greater then 0"); }); 
 <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"> <button type="button" id="save" class="commonButton"> <i class="fas fa-save"></i>&nbsp;Save </button> <div class="table-responsive"> <table id="indentTable" class="table table-bordered table-hover "> </table> </div>

A nicer version using is : 

$("#save").click(function() {
  if( $('.dataReset').is(function(i, obj) {return (obj.value > 0)}) ) {
     //success
  } else {
    alert("Quantity field Value  Should be greater then 0");
  }
});

and with ES6 that if can be even nicer-looking: 

if( $('.dataReset').is((i, obj)=>(obj.value > 0)) ) {

solution3
 0  2019-03-25 06:03:51

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<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">
<button type="button" id="save" class="commonButton">
                <i class="fas fa-save"></i>&nbsp;Save
            </button>
<div class="table-responsive">
  <table id="indentTable" class="table table-bordered table-hover ">

  </table>
</div>
<script type="text/javascript">
    var tableDataDraft = [


  {
    "Code": "1248",
    "Item Name": "Tandoori Roti",
    "Selling Price": "45.0000",
    "Qty": "0"
  },
  {
    "Code": "1249",
    "Item Name": "Naan-Plain",
    "Selling Price": "50.0000",
    "Qty": "0"
  },
  {
    "Code": "1250",
    "Item Name": "Naan-Butter",
    "Selling Price": "60.0000",
    "Qty": "0"
  },
  {
    "Code": "1251",
    "Item Name": "Naan-Garlic",
    "Selling Price": "55.0000",
    "Qty": "0"
  },
  {
    "Code": "1252",
    "Item Name": "Kulcha-Plain",
    "Selling Price": "50.0000",
    "Qty": "0"
  },
  {
    "Code": "1253",
    "Item Name": "Kulcha-Butter",
    "Selling Price": "60.0000",
    "Qty": "0"
  },
  {
    "Code": "1254",
    "Item Name": "Kulcha-Amritsari",
    "Selling Price": "65.0000",
    "Qty": "0"
  },
  {
    "Code": "1255",
    "Item Name": "Kulcha-Punjabi",
    "Selling Price": "60.0000",
    "Qty": "0"
  },
  {
    "Code": "1256",
    "Item Name": "Kulcha-Jaipuar",
    "Selling Price": "60.0000",
    "Qty": "0"
  },
  {
    "Code": "1257",
    "Item Name": "Paratha-Aloo",
    "Selling Price": "60.0000",
    "Qty": "0"
  },
  {
    "Code": "1258",
    "Item Name": "Paratha-Methi",
    "Selling Price": "55.0000",
    "Qty": "0"
  },
  {
    "Code": "1259",
    "Item Name": "Paratha-Pudina",
    "Selling Price": "60.0000",
    "Qty": "0"
  },
  {
    "Code": "1260",
    "Item Name": "Paratha-Lacha",
    "Selling Price": "55.0000",
    "Qty": "0"
  },

  {
    "Code": "603",
    "Item Name": "AMUL FRESH CREAM",
    "Selling Price": "134.8700",
    "Qty": "0"
  }
]

var itemsQuantiry1 = [];

function addTableDraft(tableDataDraft) {
  var col = Object.keys(tableDataDraft[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);
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableDataDraft.length; i++) {
    tr = table.insertRow(-1);
    tr.classList.add("item-row");
    for (var j = 0; j < col.length; j++) {
      var categoryName = tableDataDraft[i]["Category Name"];
      tr.dataset.category = categoryName;
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableDataDraft[i][col[j]];
      if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Selling_Price');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Outlet_Id');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Qty'] === tableDataDraft[i][col[j]]) {
        tabCell.classList.add("dheeraj")
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "Quantity_field");
        quantityField.setAttribute("autocomplete", "on");

        if (itemsQuantiry1[i]) {
          quantityField.setAttribute("value", itemsQuantiry1[i]);
        } else {
          quantityField.setAttribute("value", tabledata);
        }
        quantityField.setAttribute("index", i);
        quantityField.setAttribute("type", "number");
        quantityField.setAttribute("min", "0");
        quantityField.setAttribute("max", "999");
        //  quantityField.setAttribute("onfocus", "this.value=''");
        quantityField.setAttribute("required", "required");
        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      }

      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("indentTable");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)
checkValidation=function(){
var valid=true;
    $(".dataReset").each(function(){
    if($(this).val().trim()!=""){
        if(parseInt($(this).val())==0){
        valid=false;
        return;
      }
    }
  });
  // console.log(valid)
  return valid;
}
$("#save").click(function() {
  // var emptyQuantity = $(".dataReset").val(); //on click of save want to check quantity field should be greater then zero 
  if (!checkValidation()) {
    alert("Quantity field Value  Should be greater then 0");
  }else{
    alert("All is set")
  }

});
</script>
</body>
</html>

solution4
 0 ACCPTED  2019-03-25 06:11:30

The other answers check if each item has a quantity of more than 0. Your function to check if the user has selected at least one item to buy should look like this: 

 var tableDataDraft = [ { "Code": "1248", "Item Name": "Tandoori Roti", "Selling Price": "45.0000", "Qty": "0" }, { "Code": "1249", "Item Name": "Naan-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1250", "Item Name": "Naan-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1251", "Item Name": "Naan-Garlic", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1252", "Item Name": "Kulcha-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1253", "Item Name": "Kulcha-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1254", "Item Name": "Kulcha-Amritsari", "Selling Price": "65.0000", "Qty": "0" }, { "Code": "1255", "Item Name": "Kulcha-Punjabi", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1256", "Item Name": "Kulcha-Jaipuar", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1257", "Item Name": "Paratha-Aloo", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1258", "Item Name": "Paratha-Methi", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1259", "Item Name": "Paratha-Pudina", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1260", "Item Name": "Paratha-Lacha", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "603", "Item Name": "AMUL FRESH CREAM", "Selling Price": "134.8700", "Qty": "0" } ] var itemsQuantiry1 = []; function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[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); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length; j++) { var categoryName = tableDataDraft[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Selling_Price'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Outlet_Id'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Qty'] === tableDataDraft[i][col[j]]) { tabCell.classList.add("dheeraj") var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity_field"); quantityField.setAttribute("autocomplete", "on"); if (itemsQuantiry1[i]) { quantityField.setAttribute("value", itemsQuantiry1[i]); } else { quantityField.setAttribute("value", tabledata); } quantityField.setAttribute("index", i); quantityField.setAttribute("type", "number"); quantityField.setAttribute("min", "0"); quantityField.setAttribute("max", "999"); // quantityField.setAttribute("onfocus", "this.value=''"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("indentTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } document.addEventListener("DOMContentLoaded", function(event) { addTableDraft(tableDataDraft); }); function Save() { count = 0; var qtys = document.getElementsByName("Quantity_field"); for (i=0; i < qtys.length; i++) { if(qtys[i].value !== "0") { // There is atleast one item that the user has changed the qty for count += 1; } } if (count > 0) { alert("Thanks for buying something"); } else { alert("Please buy something"); } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="site.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <button type="button" id="save" class="commonButton" onclick="Save();"> <i class="fas fa-save"></i>&nbsp;Save </button> <div class="table-responsive"> <table id="indentTable" class="table table-bordered table-hover "> </table> </div>

This checks to see if atleast one of the items has a quantity of 1 or more.

solution5
 0  2019-03-25 06:13:00

I added line of codes at the bottom of your jquery. I used .each() function of every 4th <td> of the table. 

 var tableDataDraft = [ { "Code": "1248", "Item Name": "Tandoori Roti", "Selling Price": "45.0000", "Qty": "0" }, { "Code": "1249", "Item Name": "Naan-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1250", "Item Name": "Naan-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1251", "Item Name": "Naan-Garlic", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1252", "Item Name": "Kulcha-Plain", "Selling Price": "50.0000", "Qty": "0" }, { "Code": "1253", "Item Name": "Kulcha-Butter", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1254", "Item Name": "Kulcha-Amritsari", "Selling Price": "65.0000", "Qty": "0" }, { "Code": "1255", "Item Name": "Kulcha-Punjabi", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1256", "Item Name": "Kulcha-Jaipuar", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1257", "Item Name": "Paratha-Aloo", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1258", "Item Name": "Paratha-Methi", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "1259", "Item Name": "Paratha-Pudina", "Selling Price": "60.0000", "Qty": "0" }, { "Code": "1260", "Item Name": "Paratha-Lacha", "Selling Price": "55.0000", "Qty": "0" }, { "Code": "603", "Item Name": "AMUL FRESH CREAM", "Selling Price": "134.8700", "Qty": "0" } ] var itemsQuantiry1 = []; function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[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); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableDataDraft.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length; j++) { var categoryName = tableDataDraft[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Selling_Price'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Outlet_Id'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Qty'] === tableDataDraft[i][col[j]]) { tabCell.classList.add("dheeraj") var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity_field"); quantityField.setAttribute("autocomplete", "on"); if (itemsQuantiry1[i]) { quantityField.setAttribute("value", itemsQuantiry1[i]); } else { quantityField.setAttribute("value", tabledata); } quantityField.setAttribute("index", i); quantityField.setAttribute("type", "number"); quantityField.setAttribute("min", "0"); quantityField.setAttribute("max", "999"); // quantityField.setAttribute("onfocus", "this.value=''"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } if (j > 1) tabCell.classList.add("text-right"); } } var divContainer = document.getElementById("indentTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTableDraft(tableDataDraft) $("#save").click(function(event) { var emptyQuantity = $(".dataReset").val(); //on click of save want to check quantity field should be greater then zero var data = []; $("tr td:nth-child(4)").each(function() { data.push($(this).find("input").val()); }); if(data.indexOf("0") > -1){ event.preventDefault(); alert("Quantity field Value Should be greater then 0"); } else{ alert("Submitted"); } }); 
 <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"> <button type="button" id="save" class="commonButton"> <i class="fas fa-save"></i>&nbsp;Save </button> <div class="table-responsive"> <table id="indentTable" class="table table-bordered table-hover "> </table> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question iterate through a html table and get row number for each row in javascript Loop through each table row to perform math operation HTML eventlistener on each row of table Html table with button on each row Loop through elements in a HTML table How to loop through each row of gridview in jquery? loop html table using jquery and for loop (not for each) How to iterate through selected HTML table rows and retrieve data from each row Loop through an HTML table using Razor/C# to get the data in each <tr> Loop through the 1st row of HTML table (GridView) and get the cell content using Javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM