显示其中一列为空的 HTML 表

Question

我正在使用 JSON 数据创建一个 HTML 表，但我的一列显示为空。 显示为空的列实际上是一个输入字段，我从后端获取其数据

我的表正在处理谁的按钮点击：-

• 首先我的表格没有呈现quantity 列
• 用户在输入字段中输入内容并单击视图后，他只能看到他/她提供输入的行
• 然后，如果用户点击编辑，他/她将进入主表，以便用户可以再次输入输入
• 重要： itemsQuantiry1 用于存储用户在输入字段中输入的值，如果用户再次点击编辑，则用户输入的所有数据都会在输入字段中出现

var tableData1 = [{
    "Item Code": "1388",
    "Item Name": "Bakala Bhath",
    "Selling Price": "60.0000",
    "Quantity": "1478.0000"
  },
  {
    "Item Code": "1389",
    "Item Name": "Bisibelebath",
    "Selling Price": "68.0000",
    "Quantity": "2596.0000"
  },
  {
    "Item Code": "1409",
    "Item Name": "Puliogare",
    "Selling Price": "60.0000",
    "Quantity": "3698.0000"
  }
]
var itemsQuantiry1 = [];

function addTable1(tableData1) {
  var col = Object.keys(tableData1[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 < tableData1.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 = tableData1[i][col[j]];
      if (tableData1[i]['Item Code'] === tableData1[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData1[i]['Item Name'] === tableData1[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData1[i]['Selling Price'] === tableData1[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData1[i]['Quantity'] === tableData1[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "Quantity");
        quantityField.setAttribute("autocomplete", "on");
        if (itemsQuantiry1[i]) {
          quantityField.setAttribute("value", itemsQuantiry1[i]);
        } // i think here i am missing somthing in else

        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");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");

  $(".dataReset").focus(function() {
    $("#loadDraft").hide();
    $("#saveDraft").show();
  });
  $(".dataReset").on("change", function(e) {
    itemsQuantiry1[$(this).attr('index')] = e.target.value;
  });
}

addTable1(tableData1);


function viewData() {
  //get all quantity input fields
  var quantityFields = document.getElementsByClassName("dataReset");
  //iterate through all quantity input fields
  for (var i = 0; i < quantityFields.length; i++) {
    if (quantityFields[i].value != 0) {
      //if the input value of this quantity field is not equal to zero then find the closest "item-row"
      //so that we can set this table row to visible
      quantityFields[i].closest(".item-row").style.visibility = "visible";
    } else {
      //if the input value of this quantity field is equal to zero then find the closest "item-row"
      //so that we can set this table row to collapse
      quantityFields[i].closest(".item-row").style.display = "none";
    }
  }
  //changing the value of the select menu to "All"
  $('#CategoryName').val('All');
  $('#view').hide();
  $('#edit').show();
}

function editData() {
  addTable1(tableData1);
  $('#view').show();
  $('#edit').hide();
}

<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 action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">

    <hr style="border: 1px solid black">
    <div>
      <button type="button" id="save" class="commonButton">
					<i class="fas fa-save"></i>Save
				</button>
      <button id="clear" class="commonButton">
					<i class="fas fa-eraser"></i>Clear
				</button>
      <button type="button" id="view" class="commonButton" onclick="viewData()">
					<i class="fas fa-save"></i>View
				</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>
      <button type="button" id="saveDraft" class="commonButton" style="display: none">
					<i class="fas fa-save"></i>Save Draft
				</button>



    </div>
    <div class="table-responsive">
      <table class="w-100" id=HourlysalesSummary></table>
    </div>

  </form>
</div>

在我的代码中，我认为我在 第 70 行

处遗漏了一些东西

Answer 1

问题在于您使用 itemsQuantiry1 数组检查的 if 条件。创建表时它是空的。因此，它永远不会进入 if 条件来将值分配给输入。

您可以在创建表时将 Quntity 推入 itemsQuantiry1 数组，也可以删除 if 条件。

如果要推送，请更新第二个 for 循环，只需添加行 itemsQuantiry1[i] = tableData1[i].Quantity;在 for 循环的开始处。

for (var i = 0; i < tableData1.length; i++) {
    itemsQuantiry1[i] = tableData1[i].Quantity;

    // your remaining code here.
  }

Answer 2

这个不见了，

quantityField.setAttribute("placeholder", tabledata);

对于第一个问题列表。

var tableData1 = [{
    "Item Code": "1388",
    "Item Name": "Bakala Bhath",
    "Selling Price": "60.0000",
    "Quantity": "1478.0000"
  },
  {
    "Item Code": "1389",
    "Item Name": "Bisibelebath",
    "Selling Price": "68.0000",
    "Quantity": "2596.0000"
  },
  {
    "Item Code": "1409",
    "Item Name": "Puliogare",
    "Selling Price": "60.0000",
    "Quantity": "3698.0000"
  }
]
var itemsQuantiry1 = [];

function addTable1(tableData1) {
  var col = Object.keys(tableData1[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 < tableData1.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 = tableData1[i][col[j]];
      if (tableData1[i]['Item Code'] === tableData1[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData1[i]['Item Name'] === tableData1[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData1[i]['Selling Price'] === tableData1[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData1[i]['Quantity'] === tableData1[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "Quantity");
        quantityField.setAttribute("autocomplete", "on");
        if (itemsQuantiry1[i]) {
          quantityField.setAttribute("value", itemsQuantiry1[i]);
        } // i think here i am missing somthing in else
        quantityField.setAttribute("placeholder", 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");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");

  $(".dataReset").focus(function() {
    $("#loadDraft").hide();
    $("#saveDraft").show();
  });
  $(".dataReset").on("change", function(e) {
    itemsQuantiry1[$(this).attr('index')] = e.target.value;
  });
}

addTable1(tableData1);


function viewData() {
  //get all quantity input fields
  var quantityFields = document.getElementsByClassName("dataReset");
  //iterate through all quantity input fields
  for (var i = 0; i < quantityFields.length; i++) {
    if (quantityFields[i].value != 0) {
      //if the input value of this quantity field is not equal to zero then find the closest "item-row"
      //so that we can set this table row to visible
      quantityFields[i].closest(".item-row").style.visibility = "visible";
    } else {
      //if the input value of this quantity field is equal to zero then find the closest "item-row"
      //so that we can set this table row to collapse
      quantityFields[i].closest(".item-row").style.display = "none";
    }
  }
  //changing the value of the select menu to "All"
  $('#CategoryName').val('All');
  $('#view').hide();
  $('#edit').show();
}

function editData() {
  addTable1(tableData1);
  $('#view').show();
  $('#edit').hide();
}

<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 action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">

    <hr style="border: 1px solid black">
    <div>
      <button type="button" id="save" class="commonButton">
					<i class="fas fa-save"></i>Save
				</button>
      <button id="clear" class="commonButton">
					<i class="fas fa-eraser"></i>Clear
				</button>
      <button type="button" id="view" class="commonButton" onclick="viewData()">
					<i class="fas fa-save"></i>View
				</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>
      <button type="button" id="saveDraft" class="commonButton" style="display: none">
					<i class="fas fa-save"></i>Save Draft
				</button>



    </div>
    <div class="table-responsive">
      <table class="w-100" id=HourlysalesSummary></table>
    </div>

  </form>
</div>