如何在HTML表格行追加至另一表格时动态添加按钮？

没问题，我帮你调整代码，实现把符合条件的表格行追加到目标表格的同时，给每一行动态添加操作按钮（比如删除按钮）。下面是修改后的完整代码，以及关键逻辑的说明：

修改后的完整代码 #

$('#rootwizard').bootstrapWizard({
  onTabShow: function(tab, navigation, index) {
    if (index == 1) {
      $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
        const $currentRow = $(this);
        // 获取Quantity输入框的值，先做非数字校验
        const quantityValue = parseInt($currentRow.find('#Quantity').val());
        
        if (!isNaN(quantityValue) && quantityValue > 0) {
          // 检查当前行是否已经添加过操作按钮，避免重复添加
          if (!$currentRow.find('.action-button-column').length) {
            // 创建包含按钮的单元格
            const $actionCell = $('<td class="action-button-column">');
            const $deleteBtn = $('<button type="button" class="btn btn-sm btn-danger">删除</button>');
            
            // 给按钮绑定点击事件（示例：移除当前行，可根据需求替换逻辑）
            $deleteBtn.on('click', function() {
              $(this).closest('tr').remove();
            });
            
            // 把按钮添加到单元格，再把单元格追加到当前行
            $actionCell.append($deleteBtn);
            $currentRow.append($actionCell);
          }
          
          // 将修改后的行追加到目标表格
          $currentRow.appendTo('#tbOrderDetail');
        }
      });
    }
  }
});

关键逻辑说明 #

• 避免重复添加按钮：通过给按钮所在单元格添加专属类action-button-column，每次处理前先判断该行是否已有这个类，防止重复添加按钮
• 健壮的数值校验：增加!isNaN(quantityValue)判断，避免Quantity输入框值为非数字时出现逻辑错误
• 可自定义的按钮逻辑：示例中绑定了删除行的点击事件，你可以根据需求替换成其他操作（比如编辑行数据、弹窗确认等）
• Bootstrap样式兼容：按钮用了Bootstrap的btn btn-sm btn-danger类，和你的现有组件风格保持一致，也可以自定义样式类

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