我有一个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>
所以我想要实现的是
我已在代码段中注释了“保存”按钮代码
感谢您的任何帮助或方法
答案 0 :(得分:1)
您可以尝试将其保持在循环中,以便它会检查每个具有值1
的此类行,一旦发现我们需要在您的{{1}之后打断each
循环}。
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;
}
});
});
希望这对您有所帮助。
答案 1 :(得分:0)
您有多个单元格,并且不清楚单个val()
的含义-考虑一下您将与0比较一次且没有循环的事实。稍微修改一下click函数将解决此问题-循环所有单元格,并检查each
的值。这是最直接的解决方案。下面,我添加了一个使用is
的解决方案,该解决方案似乎很适合这里。
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> Save
</button>
<div class="table-responsive">
<table id="indentTable" class="table table-bordered table-hover ">
</table>
</div>
使用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");
}
});
并通过ES6
可以使if
看起来更漂亮:
if( $('.dataReset').is((i, obj)=>(obj.value > 0)) ) {
答案 2 :(得分:0)
<!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> 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>
答案 3 :(得分:0)
尝试使用jquery filter()
var allrows = $(".dataReset").length;
var allZeroRows = $(".dataReset").filter(function() {
return this.value === '0'
}).length;
if(allrows === allZeroRows) alert("Quantity field Value Should be greater then 0");
答案 4 :(得分: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");
}
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> Save
</button>
<div class="table-responsive">
<table id="indentTable" class="table table-bordered table-hover ">
</table>
</div>
这将检查至少一个项目的数量是否等于或大于1。
答案 5 :(得分:0)
我在您的jquery的底部添加了一行代码。我在表格的第4个.each()
中使用了<td>
函数。
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> Save
</button>
<div class="table-responsive">
<table id="indentTable" class="table table-bordered table-hover ">
</table>
</div>