javascript - HTML 表格循环遍历每一行

标签 javascript jquery html

我有一个 HTML 表格，它有一个输入字段，默认情况下它是 0 最初，我正在做的是保存所有具有更大值的 Items大于 0，所以它工作正常，但在 UI 结束时我想要做的是，当用户最初加载页面时，它会显示 HTML 表格，其中一列的输入字段和值为 0 ，因此，如果用户单击“保存”而没有在输入字段中输入任何值，那么我会尝试提示一个警报数量字段值应该大于 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>

所以我想要实现的是

  • 如果任何数量字段的值大于 0，那么我可以允许用户保存数据，但如果每行中所有输入字段的值都为 0，则尝试提示消息
  • 目前它所做的只是检查第一行的值是否大于零，然后保存数据，否则提示消息
  • 因此，如果用户让第一行数据为零并且他/她输入任何其他数据，那么它只会检查第一行

我已在我的代码片段中评论了“保存”按钮代码

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

最佳答案

您可以尝试将其保留在循环中，以便它检查每个具有值 1 的行，一旦发现我们需要打破 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>

希望这对您有帮助。

关于javascript - HTML 表格循环遍历每一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55331833/

上一篇：javascript - 当我选中复选框时，iCheck 启用/禁用输入文件( Bootstrap )按钮

下一篇：javascript - 如何将动态创建的 props 传递给组件？

相关文章：

javascript - 在 JavaScript 中没有 setter 的情况下设置对象属性时会发生什么

javascript - 使 ColdFusion 变量可用于 javascript 函数

javascript - 我如何更改 html 字符串？

html - Bootstrap 4 : HTML - Using a Div with the Navbar

javascript - 如何在angularjs中替换PDF.js？

javascript - 如何使用 jquery css 将按钮的背景图像分配给变量

javascript - 如何在 jquery 插件中添加 try catch block

javascript - JqueryUI - 对话框多次打开

html - 表格中 super 简单的 CSS 工具提示，为什么不显示，我可以让它工作吗？

php - 在 HTML 中显示特殊字符

©2024 IT工具网  联系我们