如何将多个元素插入到 JQuery 中的数组中？

Question

我在表格中制作了一个表格，使用户可以一次提交多个项目。我可以使用 jquery 来获取用户输入的值的第一行。但是当他们在第二行输入值时，它会显示错误。我很确定我正在使用的数组有问题。我尝试了 2 种方法，两种方法都有效，但它只取第一行的值。

<form>
<table>
<thead>
<tr>
 <th>Item Code</th>
 <th>Item Name</th>
 <th>Status</th>
</tr>
</thead>
<tbody id="entrybody">
<tr>
 <td><input type="text" name="prd_code"></td>
 <td><input type="text" name="prd_name"></td>
 <td><input type="text" name="prd_cond"></td>
</tr>
<tr>
 <td><input type="text" name="prd_code"></td>
 <td><input type="text" name="prd_name"></td>
 <td><input type="text" name="prd_cond"></td>
</tr>
<tr>
 <td><input type="text" name="prd_code"></td>
 <td><input type="text" name="prd_name"></td>
 <td><input type="text" name="prd_cond"></td>
</tr>
</tbody>

</table>
</form>

$(function() {
    $.post("action.php", function(data) {
        $("[name='title']").val(data.title);
        $("[name='body']").val(data.body);
    }, "json");
    setInterval(function() {
        var itemlist = new Array;
        var count = 1;

        var title = $("[name='title']").val();
        var body = $("[name='body']").val();

        itemlist[count - 1] = {};

        $("#productbody tbody tr").each(function() {
            var that = $(this);
            if (that.find("[name='prd_code']").val().length !== 0) {
                /*itemlist.push(code);
                itemlist.push(name);
                itemlist.push(cond);*/ //method 1

                itemlist[count - 1].code = that.find("[name='prd_code']").val();
                itemlist[count - 1].name = that.find("[name='prd_name']").val();
                itemlist[count - 1].cond = that.find("[name='prd_cond']").val(); //method 2

                count++;
            }
        });

        console.log(itemlist);

    }, 2000);
});

===== Console message (first row) =====
0:
code: "test_code1"
cond: "test_status1"
name: "test_name1"

Answer 1

对于本示例，我已将事件的方法更改为 .change()。

然后我更改了以下代码：

var itemlist = new Array;

var title = $("[name='title']").val();
var body = $("[name='body']").val();
$("#productbody  tbody tr").each(function(i) {
  var that = $(this);
  if (that.find("[name='prd_code']").val().length !== 0) {
    itemlist[i] = {};
    itemlist[i].code = that.find("[name='prd_code']").val();
    itemlist[i].name = that.find("[name='prd_name']").val();
    itemlist[i].cond = that.find("[name='prd_cond']").val(); //method 2
  }
});

一个问题是您在 foreach 语句之前使用了这个 itemlist[count - 1] = {};。所以你只创建了第一个对象。

演示

$(function() {
  $("#productbody  tbody tr input").change(function() {
    //setInterval(function() {
    var itemlist = new Array;

    var title = $("[name='title']").val();
    var body = $("[name='body']").val();
    $("#productbody  tbody tr").each(function(i) {
      var that = $(this);
      if (that.find("[name='prd_code']").val().length !== 0) {
        itemlist[i] = {};
        itemlist[i].code = that.find("[name='prd_code']").val();
        itemlist[i].name = that.find("[name='prd_name']").val();
        itemlist[i].cond = that.find("[name='prd_cond']").val(); //method 2
      }
    });

    console.log(itemlist);
  });
  //}, 2000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table id="productbody">
    <thead>
      <tr>
        <th>Item Code</th>
        <th>Item Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody id="entrybody">
      <tr>
        <td><input type="text" name="prd_code"></td>
        <td><input type="text" name="prd_name"></td>
        <td><input type="text" name="prd_cond"></td>
      </tr>
      <tr>
        <td><input type="text" name="prd_code"></td>
        <td><input type="text" name="prd_name"></td>
        <td><input type="text" name="prd_cond"></td>
      </tr>
      <tr>
        <td><input type="text" name="prd_code"></td>
        <td><input type="text" name="prd_name"></td>
        <td><input type="text" name="prd_cond"></td>
      </tr>
    </tbody>

  </table>
</form>

Answer 2

据我了解，您希望从所有行中的所有表格单元格中创建一个值数组。这是一个相对简单的方法without JQuery。

document.addEventListener(`change`, handle);

function handle(evt) {
  if (evt.target.name.startsWith(`prd_`)) {
    // retrieve all rows
    const values = [...document.querySelectorAll(`tbody tr`)]
      // map to objects containing row number and values
      .map(row => ({
         row: row.rowIndex,
         values: [...row.querySelectorAll(`[name^='prd_']`)]
            .reduce( (acc, val) => ({...acc, [val.name]: val.value}), {})
        }))
      .filter(val => (val.values.prd_code || ``).trim().length > 0);
      
    document.querySelector(`pre`).textContent = JSON.stringify(values, null, 2);
  }
}

<table>
  <thead>
    <tr>
      <th>Item Code</th>
      <th>Item Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="prd_code"></td>
      <td><input type="text" name="prd_name"></td>
      <td><input type="text" name="prd_cond"></td>
    </tr>
    <tr>
      <td><input type="text" name="prd_code"></td>
      <td><input type="text" name="prd_name"></td>
      <td><input type="text" name="prd_cond"></td>
    </tr>
    <tr>
      <td><input type="text" name="prd_code"></td>
      <td><input type="text" name="prd_name"></td>
      <td><input type="text" name="prd_cond"></td>
    </tr>
  </tbody>
</table>

<pre></pre>