Question

我内部有一个Form，该Form由3个buttons和一个HTML表组成，该表将用JSON数据动态填充。

我在做什么：

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

现在我的问题是什么

点击加载后，从草稿表中加载草稿数据
此后，如果用户要编辑数据，则他将单击edit。点击edit时，我正在加载具有tableDataDraft的{{1}}表
但在这里它使用Quantity='0'加载所有我不想要的数据。我想当用户单击0时，edit数据以及剩余的non-zero数据。
在我的代码中，我在两个数据集中都使用0和itemsQuantiry=[]来检查数据是否存在，然后显示数据，否则显示0或（tableData）
在这里，我使用itemsQuantiry1=[]存储数据输入字段

代码段

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

在我的js代码的第73行中，我正在全局声明<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>
因为我必须上传此大代码才能运行代码段，所以我要注意的主要行是：itemsQuantiry1=[]代码中的73、115、141和183
在所有这些行中，我都在检查值是否可用，然后显示该值，否则显示JavaScript的数量

Answer 1

首先，我想说的是，您应该真正重新观看代码，并使代码更整洁，更具可读性，而不是全部集成在一起。

您的函数具有99％的相同性，您编写两次，只需添加一个参数即可取出其中一个。

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

对于变量，您正在错误地量化所有代码中的数量以量化。

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

像这样吗？ 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的所有数据。我相信从这一点上您可以做您想做的事。打开控制台，然后单击“编辑”。

Answer 2

您有一个逻辑问题..只需在editData（）方法中对此进行更新

 var temptable = [];
 $.each(tableDataDraft,function(index)
  {
    temptable.push(tableDataDraft[index]);
  });
  $.each(tableData,function(index)
   {
    temptable.push(tableData[index]);
   });

你很高兴。检查这个结果 https://codepen.io/anon/pen/JxWrbd?editors=1010

单击按钮后，HTML表中的所有数据均重置为0

2 个答案: