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

Posted 2023-05-09

【中文标题】如何将多个元素插入到 JQuery 中的数组中？

【英文标题】：How to insert multiple element into an array in JQuery?

【发布时间】：2021-10-07 14:58:06

【问题描述】：

我在表格中制作了一个表格，使用户可以一次提交多个项目。我可以使用 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"

【问题讨论】：

您的表没有 ID，但在您的代码中您调用 productbody

【参考方案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>

【参考方案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>