我有两个带有两个JSON数据的HTML表,最初我正在用tableData
加载表,该表的数量为0
,以我的HTML格式,我有3个按钮save
点击load draft
时edit
和load draft
我点击加载时正在将一些数据加载到表中我调用tableDataDraft
加载了一些数据,然后再次点击了edit编辑数据
我正面临的问题
1001
出现重复时,quantinty
的值以1213.0000
的值出现两次,而数量以{的值出现{1}}我不想要的
我希望零值不应该出现
0
var tableData = [{
"Item Code": "1000",
"Item Name": "Coffee-S1",
"Category Name": "Beverages",
"Quantity": "0"
},
{
"Item Code": "1001",
"Item Name": "Coffee-S",
"Category Name": "Beverages",
"Quantity": "0"
},
{
"Item Code": "1083",
"Item Name": "Oma Stick 200gm",
"Category Name": "Biscuits",
"Quantity": "0"
},
{
"Item Code": "1387",
"Item Name": "simple Bhath",
"Category Name": "Bhath",
"Quantity": "0"
},
{
"Item Code": "1388",
"Item Name": "Bakala Bhath",
"Category Name": "Bhath",
"Quantity": "0"
},
{
"Item Code": "1389",
"Item Name": "Bisibelebath",
"Category Name": "Bhath",
"Quantity": "0"
}
]
var tableDataDraft = [{
"Item Code": "1001",
"Item Name": "Coffee-S",
"Category Name": "Beverages",
"Quantity": "1213.0000"
},
{
"Item Code": "1083",
"Item Name": "Oma Stick 200gm",
"Category Name": "Biscuits",
"Quantity": "1478.0000"
},
{
"Item Code": "1388",
"Item Name": "Bakala Bhath",
"Category Name": "Bhath",
"Quantity": "1478.0000"
},
{
"Item Code": "1389",
"Item Name": "Bisibelebath",
"Category Name": "Bhath",
"Quantity": "2596.0000"
}
]
$("#loadDraft").click(function() {
addTableDraft(tableDataDraft);
$("#edit").show();
})
var itemsQuantiry = []; // higliting the error i think
function addTableDraft(tableDataDraft, tableData) {
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++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var tabledata = tableDataDraft[i][col[j]];
if (tableDataDraft[i]['Item 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]['Quantity'] === tableDataDraft[i][col[j]]) {
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "Quantity_field");
quantityField.setAttribute("autocomplete", "on");
if (itemsQuantiry[i]) { // higliting the error i think
quantityField.setAttribute("value", itemsQuantiry[i]);
} else { // higliting the error i think
quantityField.setAttribute("value", tabledata);
}
quantityField.setAttribute("index", i);
quantityField.setAttribute("type", "number");
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("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
$(".dataReset").on("change", function(e) {
itemsQuantiry[$(this).attr('index')] = e.target.value;
});
}
addTableDraft(tableData);
function editData() { //this function is doing edit work
var temptable = [];
$.each(tableDataDraft, function(index) {
temptable.push(tableDataDraft[index]);
});
$.each(tableData, function(index) {
temptable.push(tableData[index]);
});
addTableDraft(temptable)
}
因为有一个editData()函数正在执行编辑工作但显示重复数据 我不希望数据为零,应该按顺序显示
这里有任何人请帮助
答案 0 :(得分:0)
在将新项目添加到表中之前(单击“编辑”之后),对于每个新项目,您需要检查当前表数据中是否已经存在具有相同ID的项目。如果是这样,并且您要添加的项目的“数量”为“ 0”,则不得添加该项目。
您可以通过遍历现有数据并将其与要添加的每个新项目进行比较来实现这一目标。
请参见下面的示例中修改后的“ editData()”函数:
var tableData = [{
"Item Code": "1000",
"Item Name": "Coffee-S1",
"Category Name": "Beverages",
"Quantity": "0"
},
{
"Item Code": "1001",
"Item Name": "Coffee-S",
"Category Name": "Beverages",
"Quantity": "0"
},
{
"Item Code": "1083",
"Item Name": "Oma Stick 200gm",
"Category Name": "Biscuits",
"Quantity": "0"
},
{
"Item Code": "1387",
"Item Name": "simple Bhath",
"Category Name": "Bhath",
"Quantity": "0"
},
{
"Item Code": "1388",
"Item Name": "Bakala Bhath",
"Category Name": "Bhath",
"Quantity": "0"
},
{
"Item Code": "1389",
"Item Name": "Bisibelebath",
"Category Name": "Bhath",
"Quantity": "0"
}
]
var tableDataDraft = [{
"Item Code": "1001",
"Item Name": "Coffee-S",
"Category Name": "Beverages",
"Quantity": "1213.0000"
},
{
"Item Code": "1083",
"Item Name": "Oma Stick 200gm",
"Category Name": "Biscuits",
"Quantity": "1478.0000"
},
{
"Item Code": "1388",
"Item Name": "Bakala Bhath",
"Category Name": "Bhath",
"Quantity": "1478.0000"
},
{
"Item Code": "1389",
"Item Name": "Bisibelebath",
"Category Name": "Bhath",
"Quantity": "2596.0000"
}
]
$("#loadDraft").click(function() {
addTableDraft(tableDataDraft);
$("#edit").show();
})
var itemsQuantiry = []; // higliting the error i think
function addTableDraft(tableDataDraft, tableData) {
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++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var tabledata = tableDataDraft[i][col[j]];
if (tableDataDraft[i]['Item 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]['Quantity'] === tableDataDraft[i][col[j]]) {
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "Quantity_field");
quantityField.setAttribute("autocomplete", "on");
if (itemsQuantiry[i]) { // higliting the error i think
quantityField.setAttribute("value", itemsQuantiry[i]);
} else { // higliting the error i think
quantityField.setAttribute("value", tabledata);
}
quantityField.setAttribute("index", i);
quantityField.setAttribute("type", "number");
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("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
$(".dataReset").on("change", function(e) {
itemsQuantiry[$(this).attr('index')] = e.target.value;
});
}
addTableDraft(tableData);
function editData() { //this function is doing edit work
var temptable = tableDataDraft;
$.each(tableData, function(index, obj) {
var id = obj["Item Code"];
var addNewData = true;
//check existing data
$.each(temptable, function(idx, obj2) {
//if the ID matches and the new quantity is 0 then don't add the new item
if (obj2["Item Code"] == id && obj["Quantity"] == 0) {
addNewData = false;
return false;
}
});
if (addNewData == true) temptable.push(tableData[index]);
});
addTableDraft(temptable)
}
<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">
<div class="container" id="divHide">
<form id="indentForm" autocomplete="on">
<div class="row position-relative">
</div>
<hr style="border: 1px solid black">
<div>
<button type="button" id="save" class="commonButton">
<i class="fas fa-save"></i>Save
</button>
<button type="button" id="edit" class="commonButton" onclick="editData()" style="display:none">
<i class="fas fa-save"></i>Edit
</button>
<button type="button" id="loadDraft" class="commonButton">
<i class="fas fa-save"></i>Load Draft
</button>
</div>
<div class="table-responsive">
<table class="w-100" id=HourlysalesSummary></table>
</div>
</form>
</div>
P.S。关于按ID对数组进行排序(在显示之前),您可以轻松地单独进行研究。我认为不需要在此处重复有关该主题的现有材料。