如何在PHP循环中整合重复JS代码，实现每行独立功能？

核心思路 #

不再为每行生成带编号的独立JS函数，而是通过**元素数据属性（data-*）**存储每行的唯一标识/关键数据，配合通用函数利用事件触发时的上下文（比如this）定位当前行，获取对应变量值，彻底消除代码重复。

步骤1：改造PHP生成的HTML结构 #

原冗余结构示例 #

<?php foreach ($shoppingList as $index => $item): ?>
  <tr id="line-<?= $index ?>">
    <td><?= $item['name'] ?></td>
    <td><input type="text" id="quantity-<?= $index ?>" value="<?= $item['quantity'] ?>"></td>
    <td>
      <button onclick="editSave<?= $index ?>()">保存</button>
      <button onclick="hiddenLine<?= $index ?>()">隐藏</button>
    </td>
  </tr>
<?php endforeach; ?>

优化后结构 #

给行元素添加数据属性存储索引/商品ID，按钮改用类名绑定事件，移除带编号的onclick：

<?php foreach ($shoppingList as $index => $item): ?>
  <tr class="shopping-row" data-row-index="<?= $index ?>" data-item-id="<?= $item['id'] ?>">
    <td class="item-name"><?= $item['name'] ?></td>
    <td><input class="item-quantity" type="text" value="<?= $item['quantity'] ?>"></td>
    <td>
      <button class="btn-save">保存</button>
      <button class="btn-hide">隐藏</button>
    </td>
  </tr>
<?php endforeach; ?>

步骤2：编写通用JS函数 #

方式1：事件委托（推荐，支持动态新增行） #

绑定事件到表格父元素，通过事件冒泡识别点击的按钮，定位对应行：

// 假设表格容器ID为shopping-table
document.getElementById('shopping-table').addEventListener('click', function(e) {
  const targetBtn = e.target;
  const currentRow = targetBtn.closest('.shopping-row');
  if (!currentRow) return; // 点击区域不在目标行内，直接返回

  // 获取当前行的关键数据
  const rowIndex = currentRow.dataset.rowIndex;
  const itemId = currentRow.dataset.itemId;
  const quantity = currentRow.querySelector('.item-quantity').value;

  // 处理保存逻辑
  if (targetBtn.classList.contains('btn-save')) {
    // 替换为你原editSave<x>的业务逻辑，比如提交到后端
    console.log(`保存行${rowIndex}：商品ID${itemId}，数量${quantity}`);
    // 示例：POST请求提交
    // fetch('/update-item.php', {
    //   method: 'POST',
    //   headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    //   body: `item_id=${itemId}&quantity=${quantity}`
    // });
  }

  // 处理隐藏逻辑
  if (targetBtn.classList.contains('btn-hide')) {
    currentRow.style.display = 'none';
    console.log(`隐藏行${rowIndex}`);
  }
});

方式2：直接绑定类事件（适合静态行） #

如果列表不会动态新增，可直接给按钮类绑定事件：

// 绑定保存按钮事件
document.querySelectorAll('.btn-save').forEach(btn => {
  btn.addEventListener('click', function() {
    const row = this.closest('.shopping-row');
    const itemId = row.dataset.itemId;
    const quantity = row.querySelector('.item-quantity').value;
    // 执行保存逻辑
  });
});

// 绑定隐藏按钮事件
document.querySelectorAll('.btn-hide').forEach(btn => {
  btn.addEventListener('click', function() {
    this.closest('.shopping-row').style.display = 'none';
  });
});

优化优势 #

• 彻底消除重复的带编号JS函数，大幅减少代码体积
• 逻辑集中维护，修改业务逻辑只需改动一处通用函数
• 事件委托方式支持动态新增的行，无需重新绑定事件
• 代码结构更清晰，可读性与可维护性显著提升

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