迭代 TR 元素并构建连接的字符串值时出错

Question

我正在尝试编写一个 JavaScript 函数，它可以迭代表的行，获取修改后的输入值，并在单击时构建一个管道分隔值的串联字符串。这是表格的示例，行数可能会有所不同...

结果是没有警报框...请有人让我知道为什么警报在每个函数中起作用但在该函数之外不起作用以及如何构建这些字符串最终将通过ajax传递。

警报框在每个 TR 的收集点起作用，但是每个函数之外的串联和最终警报不起作用。

function test() {
  //alert("The button was clicked.");

  var scf = '';
  var qtyf = '';
  var i = 1;
  var t = document.getElementById('my_id');

  $("#my_id tr").each(function() {
    var sc = $(t.rows[i].cells[0]).text(); //this works and returns the stockcode
    var qty = $(t.rows[i].cells[3]).find("input").val();

    //alert(sc);
    //alert(qty);

    scf = scf + '|' + sc;
    qtyf = qtyf + '|' + qty;
    i++;
  });

  alert(scf);
  alert(qtyf);
};

<table>
  <thead>
    <tr>
      <th class="column-code">Code</th>
      <th class="column-attribute">Colour</th>
      <th class="column-attribute">Size</th>
      <th class="column-qty">Qty</th>
      <th class="column-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody class="product-queue-rows">
    <tr>
      <td class="product-sku">CZSPRBP32</td>
      <td><span class="swatch swatch-royal-blue"></span> <span class="swatch-title">Royal Blue</span></td>
      <td>32</td>
      <td><label class="fancy-quantity"><input type="number" class="product-quantity" value="1" data-sku="CZSPRBP32"><a href="#" class="fq-up" title="Increase"></a><a href="#" class="fq-down" title="Decrease"></a></label></td>
      <td><a href="#" class="remove-button" title="Remove item" aria-label="Remove item" data-sku="CZSPRBP32"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="svg-cross" points="17.744 20 12 14.256 6.256 20 4 17.744 9.744 12 4 6.256 6.256 4 12 9.744 17.744 4 20 6.256 14.256 12 20 17.744"></polygon></svg></a></td>
    </tr>
    <tr>
      <td class="product-sku">CZSPRBP34</td>
      <td><span class="swatch swatch-royal-blue"></span> <span class="swatch-title">Royal Blue</span></td>
      <td>34</td>
      <td><label class="fancy-quantity"><input type="number" class="product-quantity" value="1" data-sku="CZSPRBP34"><a href="#" class="fq-up" title="Increase"></a><a href="#" class="fq-down" title="Decrease"></a></label></td>
      <td><a href="#" class="remove-button" title="Remove item" aria-label="Remove item" data-sku="CZSPRBP34"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="svg-cross" points="17.744 20 12 14.256 6.256 20 4 17.744 9.744 12 4 6.256 6.256 4 12 9.744 17.744 4 20 6.256 14.256 12 20 17.744"></polygon></svg></a>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Answer 1

您实际上并未调用 test 并且选择器未针对行。

可以更有效地使用 jQuery：

const $table = $('.product-queue-rows');
const $rows = $table.find("tr");
const test = () => {
  let scf = [];
  let qtyf = [];
  $rows.each(function() {
    scf.push($('.product-sku',this).text());
    qtyf.push($('.product-quantity',this).val());
  })
  console.log(scf,qtyf);
}
$table.on('change', test);
test(); // initial

<table>
  <thead>
    <tr>
      <th class="column-code">Code</th>
      <th class="column-attribute">Colour</th>
      <th class="column-attribute">Size</th>
      <th class="column-qty">Qty</th>
      <th class="column-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody class="product-queue-rows">
    <tr>
      <td class="product-sku">CZSPRBP32</td>
      <td><span class="swatch swatch-royal-blue"></span> <span class="swatch-title">Royal Blue</span></td>
      <td>32</td>
      <td><label class="fancy-quantity"><input type="number" class="product-quantity" value="1" data-sku="CZSPRBP32"><a href="#" class="fq-up" title="Increase"></a><a href="#" class="fq-down" title="Decrease"></a></label></td>
      <td><a href="#" class="remove-button" title="Remove item" aria-label="Remove item" data-sku="CZSPRBP32"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="svg-cross" points="17.744 20 12 14.256 6.256 20 4 17.744 9.744 12 4 6.256 6.256 4 12 9.744 17.744 4 20 6.256 14.256 12 20 17.744"></polygon></svg></a></td>
    </tr>
    <tr>
      <td class="product-sku">CZSPRBP34</td>
      <td><span class="swatch swatch-royal-blue"></span> <span class="swatch-title">Royal Blue</span></td>
      <td>34</td>
      <td><label class="fancy-quantity"><input type="number" class="product-quantity" value="1" data-sku="CZSPRBP34"><a href="#" class="fq-up" title="Increase"></a><a href="#" class="fq-down" title="Decrease"></a></label></td>
      <td><a href="#" class="remove-button" title="Remove item" aria-label="Remove item" data-sku="CZSPRBP34"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="svg-cross" points="17.744 20 12 14.256 6.256 20 4 17.744 9.744 12 4 6.256 6.256 4 12 9.744 17.744 4 20 6.256 14.256 12 20 17.744"></polygon></svg></a>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>