遍历表格TR元素拼接字符串异常：内部alert正常外部无响应

编写JavaScript函数，期望点击时遍历表格行，获取修改后的输入值并构建竖线分隔的拼接字符串。当前each函数内的alert可正常触发，但函数外部的alert无响应，无法获取拼接后的字符串，最终需将这些字符串通过AJAX传递。相关代码如下：

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>

问题原因 #

1. 表格ID不匹配：JS代码中通过document.getElementById('my_id')和$("#my_id tr")定位表格，但HTML里的<table>标签未添加id="my_id"属性，导致t变量为null，循环中访问t.rows[i]会抛出类型错误，直接中断函数执行，后续的外部alert无法运行。
2. 手动索引逻辑错误：依赖外部i变量遍历行的方式不合理，jQuery的each会遍历所有匹配的<tr>（包括表头行），容易出现索引越界或行匹配错误的问题。

解决方法 #

1. 修复表格ID #

给HTML中的<table>标签添加id="my_id"：

<table id="my_id">
  <!-- 原有表格内容保持不变 -->
</table>

2. 重构JavaScript函数 #

利用jQueryeach的内置参数获取当前行，优化数据收集逻辑，避免手动维护索引：

function test() {
  var scf = [];
  var qtyf = [];

  // 仅遍历tbody中的数据行，避开表头行
  $("#my_id tbody tr").each(function() {
    // 通过类选择器获取商品编码，更健壮
    var sc = $(this).find(".product-sku").text().trim();
    // 通过类选择器获取数量输入框的值
    var qty = $(this).find(".product-quantity").val().trim();

    scf.push(sc);
    qtyf.push(qty);
  });

  // 用竖线拼接数组，避免开头出现多余的竖线
  var scStr = scf.join('|');
  var qtyStr = qtyf.join('|');

  alert(scStr);
  alert(qtyStr);

  // 示例：AJAX传递数据
  /*
  $.ajax({
    url: '你的接口地址',
    method: 'POST',
    data: {
      stockCodes: scStr,
      quantities: qtyStr
    },
    success: function(res) {
      // 处理成功回调
    },
    error: function(xhr, status, err) {
      // 处理错误情况
    }
  });
  */
};

优化说明 #

• 使用数组存储数据后join拼接，比字符串累加更高效，且不会生成开头多余的竖线。
• 通过类选择器定位元素，而非依赖单元格索引，后续表格结构调整时不容易出错。
• 限定遍历tbody内的行，避免表头行被错误处理。
• 添加trim()去除文本前后空格，避免无效字符干扰。

内容的提问来源于stack exchange，提问作者CarpKing