javascript - 单击按钮时，HTML 表中的所有数据都重置为 0

Question

我里面有一个表单，它由 3 个按钮 和一个 HTML 表格组成，我用 JSON 数据动态地填充它。

我在做什么:

我有两个具有相同结构的表的 JSON 数据，这就是为什么我试图将两个 JSON 数据集加载到相同的 table id 即 HourlysalesSummary .最初它加载数据 tableData，然后在用户点击 load Draft 后它加载 tableDataDraft。当页面最初加载时，我想将数据集 tableData 与 Quantity 字段显示为 0。然后用户将输入一些内容并能够保存。此外，还有一个按钮 save draft，用户可以将数据保存到 dataTableDraft 中，我没有将其包含在我的代码中，因为它工作正常。

现在我的问题是什么:

• 点击加载草稿数据后从草稿表加载
• 之后，如果用户想要编辑数据，那么他将点击edit。单击 edit 我正在加载 tableDataDraft 表，其中包含 Quantity='0'
• 但是这里它加载了所有我不想要的带有 0 的数据。我想要当用户点击 edit 时，非零 数据以及剩余的 0 数据。
• 在我的代码中，我在两个数据集中使用 itemsQuantiry=[] 和 itemsQuantiry1=[] 来检查数据是否存在，然后显示该数据，否则显示 0或(表数据)
• 这里我使用autocomplete=on来存储数据输入字段

片段

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 = [];

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); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    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]) {
          quantityField.setAttribute("value", itemsQuantiry[i]);
        } else {
          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;
  });
}
var itemsQuantiry1 = [];

function addTable(tableData) {
  var col = Object.keys(tableData[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); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.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 = tableData[i][col[j]];
      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[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 (itemsQuantiry1[i]) {
          quantityField.setAttribute("value", itemsQuantiry1[i]);
        } else {
          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) {
    itemsQuantiry1[$(this).attr('index')] = e.target.value;
  });
}
addTable(tableData);

function editData() {
  addTable(tableData)

}

<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>

• 在我的 js 代码的第 73 行，我声明 itemsQuantiry1=[] 全局
• 因为我必须上传这么大的代码来运行该代码段，所以我的 JavaScript 代码中要关注的主要行是:73、115、141 和 183<
• 在所有这些行中，我检查值是否可用，然后显示该值，否则显示 tableData 的数量

Answer 1

首先，我想说的是，您真的应该重新审视您的代码，使其更清晰、更具可读性，而不是一成不变。

你的函数99%一样，你写了两遍，加个参数就可以去掉其中一个。

您还应该通过添加执行特定任务的较小函数(例如构建行或列)而不是将所有内容都放在一个庞大的函数中来使其更具可读性。

对于变量，您在所有代码中都将 quantity 拼错为 quantiry。

最后，如果我对您的问题的理解正确，您希望加载的值在您编辑时保持显示在表格中。

像这样？ https://codepen.io/crocsx-the-styleful/pen/GzWvaN

如果是这样，你的错误就在这里

if (targetArray[i]) {
  quantityField.setAttribute("value", targetArray[i]);
} else {
  quantityField.setAttribute("value", tabledata);
  targetArray[i] = tabledata;
}

但是您应该检查它是否按您想要的方式工作(因为它没有完全按预期工作)因为很难理解您想要实现什么以及您是如何做到的。但基本上，您应该在加载时将更改应用于显示的数组

编辑:试试这个:

https://codepen.io/crocsx-the-styleful/pen/GzWvaN

我不知道应该做什么编辑，但是，现在您有一个变量 currentQuantity，它存储一个元素 ID 的所有数据。我相信从这一点上你可以做你想做的事。打开控制台并单击编辑。