Question

我有两个带有两个JSON数据的HTML表，最初我正在用tableData加载表，该表的数量为0，以我的HTML格式，我有3个按钮save点击load draft时edit和load draft我点击加载时正在将一些数据加载到表中我调用tableDataDraft加载了一些数据，然后再次点击了edit编辑数据

我正面临的问题

当我单击“编辑”时，我正在显示草稿数据（tableDraft）以及tableData
所以我的问题是，当我单击数据进入表但在我的代码中1001出现重复时，quantinty的值以1213.0000的值出现两次，而数量以{的值出现{1}}我不想要的我希望零值不应该出现
它应该依次出现，就像1001在第一位，然后它应该只在第一位
数据不应重复

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（）函数正在执行编辑工作但显示重复数据我不希望数据为零，应该按顺序显示

这里有任何人请帮助

Answer 1

在将新项目添加到表中之前（单击“编辑”之后），对于每个新项目，您需要检查当前表数据中是否已经存在具有相同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对数组进行排序（在显示之前），您可以轻松地单独进行研究。我认为不需要在此处重复有关该主题的现有材料。

HTML表格数据被复制

1 个答案: