Question

我有一个HTML表，其中的一列是可编辑的，这是一个输入字段。我还有一个下拉字段，我要在其中放置onchange，并希望将所有输入字段数据打印到控制台上。

但是它在控制台上仅显示一个值，即第一个值。

代码段

var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",

    "Quantity": "0"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",

    "Quantity": "0"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",

    "Quantity": "0"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",

    "Quantity": "0"

  },

]

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 (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(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");
}
addTable(tableData);

$('#CategoryName').on('change', function() {
  var testing = $(".dataReset").val();
  console.log(testing);
});

<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">
   
    <div class="col-lg-4">
      <h5>Category</h5>
      <select class="test" id="CategoryName" name="categoryCode">
        <option>All</option>
        <option>Cat1</option>
        <option>Cat2</option>
      </select>
    </div>
  </div>
  <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>

为什么没有显示完整的数据列表？它只显示第一个字段数据，我需要所有数据，并将其与ajax一起传递给服务器

Answer 1

$(".dataReset")是jQuery对象的列表。您需要遍历它们：

$.each(".dataReset", (index,element) => console.log( $(element).val() ) )

jQuery $.each documentation

Answer 2

刚刚编辑了$('#CategoryName').on('change'...部分

var tableData = [{
    "Item Code": "1001",
    "Item Name": "Beverages",

    "Quantity": "0"

  },
  {
    "Item Code": "2003",
    "Item Name": "Juices",

    "Quantity": "0"
  },
  {
    "Item Code": "1004",
    "Item Name": "Soups",

    "Quantity": "0"

  },
  {
    "Item Code": "2005",
    "Item Name": "Cookies",

    "Quantity": "0"

  },

]

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 (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(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");
}
addTable(tableData);

$('#CategoryName').on('change', function() {

  //you need to structure the data somehow 
  // and iterate over each input, if not , val() will act like .first().val() (just returning the value of the first input)
  var testing = [];
  $(".dataReset").each(function(u,itm){
   testing.push($(itm).val());
  });
  console.log(testing);
});

<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">
   
    <div class="col-lg-4">
      <h5>Category</h5>
      <select class="test" id="CategoryName" name="categoryCode">
        <option>All</option>
        <option>Cat1</option>
        <option>Cat2</option>
      </select>
    </div>
  </div>
  <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>

onchange选择字段在控制台上打印所有输入字段的值

2 个答案: