【发布时间】: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> 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