【问题标题】:HTML table to Loop Through each row循环遍历每一行的 HTML 表格
【发布时间】:2019-04-11 03:30:25
【问题描述】:

我有一个 HTML 表格,它有一个默认输入字段,最初是 0,我正在做的是保存所有值大于 0 的 Items,所以它工作正常,但是在UI结束我想要做的是当用户最初加载页面时,它会显示HTML表格,其中一列具有输入字段和值为0,所以如果用户点击保存而不在输入字段中输入任何值然后我我正在尝试提示警报quantity field value should be greater then 0,但是当我这样做时,它只检查第一行

代码

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>

所以我想要实现的是

  • 如果任何 Quantity 字段的值大于 0,则我可以允许用户保存数据,但如果所有输入字段在每行中的值均为 0,则尝试提示消息
  • 目前它正在做什么它只检查第一行,如果它的值大于零,那么它会保存数据,否则会提示消息
  • 因此,如果用户让第一行数据为零而其他数据他/她输入任何内容,那么它只检查第一行

我已经在我的 sn-p 中注释了保存按钮代码

任何形式的帮助或方法将不胜感激,谢谢

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:

    您可以尝试将其保持在一个循环中,以便它检查每个具有值1 的此类行,一旦发现我们需要在您的alert 之后打破each 循环。

    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>

    希望对你有所帮助。

    【讨论】:

    • 同样的问题,我让第一行为 0,然后在第二行或任何行输入任何数字,然后它不应该提示任何警报
    【解决方案2】:

    其他答案检查每件商品的数量是否超过 0。检查用户是否至少选择了一件要购买的商品的函数应如下所示:

    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>

    这会检查至少一个项目的数量是否为 1 或更多。

    【讨论】:

    【解决方案3】:

    我在您的 jquery 底部添加了一行代码。我使用表中每 4 个&lt;td&gt; 的.each() 函数。

    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>

    【讨论】:

      【解决方案4】:
      <!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>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-04-14
        • 2014-06-29
        • 1970-01-01
        • 1970-01-01
        • 2018-01-05
        • 2011-03-09
        • 2017-02-11
        • 2011-06-30
        相关资源
        最近更新 更多