Question

我有一个要用JSON数据呈现的HTML表，我想做的就是使用JavaScript创建一列，而该JavaScript不会作为JSON数据出现

我有一个包含2列的表，我想手动将第3个添加为Quantity
使用JavaScript可以做到，但我不明白这一点

我的代码段

var tableData = [
    { "Item Code": "1001", "Item Name": "Beverages", },
    { "Item Code": "2003", "Item Name": "Juices", },
    { "Item Code": "1004", "Item Name": "Soups", },
    { "Item Code": "2005", "Item Name": "Cookies", },
];

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);
    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 (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");
}
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">
<form action="InsertQuantityIndent" method="post" id="form1">
  <div class="row position-relative">
    
  <br>
  <div class="table-responsive">
    <table class=" w-100" id=HourlysalesSummary></table>
  </div>
  <div>
    <button type="submit" id="save">
      <i class="fas fa-save"></i> Save
    </button>
  </div>
</form>

我想添加名为quantity的第三列，数据作为0。我不知道该怎么办。

Answer 1

它将为您提供帮助。页面加载时，它将自行添加列。

var tableData = [
    { "Item Code": "1001", "Item Name": "Beverages", },
    { "Item Code": "2003", "Item Name": "Juices", },
    { "Item Code": "1004", "Item Name": "Soups", },
    { "Item Code": "2005", "Item Name": "Cookies", },
];

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);
    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 (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");
}
addTable(tableData);

function addCol(){

var colname = "Quantity";
var colValue = 0;

var tablehead = $("#HourlysalesSummary tr[class='text-center head']")[0].append($('<th>'+colname+'</th>')[0]);
var tableRow = $("#HourlysalesSummary tr");
var i =1;

while(i < tableRow.length){

tableRow[i].append($('<td>'+colValue+'</td>')[0]);
i++;

}

}

addCol();

<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"/>


<form action="InsertQuantityIndent" method="post" id="form1">
  <div class="row position-relative">
    
  <br>
  <div class="table-responsive">
    <table class=" w-100" id="HourlysalesSummary"></table>
  </div>
  <div>
    <button type="submit" id="save">
      <i class="fas fa-save"></i> Save
    </button>
  </div>
</form>

Answer 2

我们可以在循环内进行

var tableData = [
    { "Item Code": "1001", "Item Name": "Beverages", },
    { "Item Code": "2003", "Item Name": "Juices", },
    { "Item Code": "1004", "Item Name": "Soups", },
    { "Item Code": "2005", "Item Name": "Cookies", },
];

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.
  var colNum = col.length; //to improve the speed
  for (var i = 0; i < colNum + 1; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    if(i >= colNum ){
      th.innerHTML = "Quantity";
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head")
    }else{
      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);
    for (var j = 0; j < col.length + 1; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];
      if(i > -1 && j >= colNum){
      		tabCell.innerHTML = 0;
          hiddenField.setAttribute('name', 'Quantity');
          hiddenField.setAttribute('value', "zero");
      		tabCell.appendChild(hiddenField);
      }else{
      
          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 (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");
}
addTable(tableData);

<html>
<head>
<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">

</head>

<body style="padding:10px;">

<form action="InsertQuantityIndent" method="post" id="form1">
  <div class="row position-relative">
    
  <br>
  <div class="table-responsive">
    <table class=" w-100" id=HourlysalesSummary></table>
  </div>
  <div>
    <button type="submit" id="save">
      <i class="fas fa-save"></i> Save
    </button>
  </div>
  </div>
</form>
</body>

</html>

Answer 3

function addTable(tableData) {
  tableData.forEach(item=>item.Quantity='')
...
}

在addTable函数的上方添加一行并检查

如何使用JavaScript手动将列插入HTML表？

3 个答案: