如何基于点击的按钮，使用jQuery和PHP提交对应行数据？

你现在遇到的核心问题是：点击表格每行的「Apply」按钮时，总是获取到第一行的数据，而不是当前点击行的对应数据。这是因为你的代码里犯了两个关键错误：HTML重复使用唯一ID，以及jQuery事件绑定没有基于当前点击的上下文获取数据。

先理清楚你的场景：

• 从数据库获取多职位 vacancy 数据，循环生成Bootstrap表格
• 期望点击每行的按钮，把当前行的职位信息提交到新页面
• 但现在点击任意按钮，console.log输出的都是第一行的 vacancyID、职位名称等数据

你的现有代码情况 #

PHP表格生成代码

<div class="table-responsive"> 
  <table class="table"> 
    <thead> 
      <tr> 
        <th> Vacancy Number</th> 
        <th> Vacancy Title</th> 
        <th> Requirements</th> 
        <th> Responsibilities</th> 
        <th> Qualifications</th> 
        <th> Closing Date</th> 
        <th> Apply</th> 
      </tr> 
    </thead> 
    <tbody> 
      <?php 
      //Loop through the data 
      foreach ($currentVacancies as $vacancy) { 
        $vacancyID = $vacancy->vacancyID; 
        $roleLongTitle = $vacancy->roleLongTitle; 
        $roleRequirements = $vacancy->roleRequirements; 
        $roleResponsibilities = $vacancy->roleResponsibilities; 
        $roleQualifications = $vacancy->roleQualifications; 
        $closeDate = $vacancy->closeDate; 
        $recruitementType = $vacancy->recruitementType; 

        //Check if the recruitement is internal, external or for both 
        if($recruitementType === 'Both' || $recruitementType === 'External'){ 
      ?> 
      <tr> 
        <td id="vacancyID"> <?php echo $vacancyID; ?> </td> 
        <td id="roleLongTitle"> <?php echo $roleLongTitle; ?> </td> 
        <td id="roleRequirements"> <?php echo $roleRequirements; ?> </td> 
        <td id="roleResponsibilities"> <?php echo $roleResponsibilities; ?> </td> 
        <td id="roleQualifications"> <?php echo $roleQualifications; ?> </td> 
        <td id="closeDate"> <?php echo convertToDate($closeDate); ?> </td> 
        <td> <!-- 按钮位置 --> </td> 
      </tr> 
      <?php 
        } 
      } 
      ?> 
    </tbody> 
  </table>
</div>

jQuery按钮绑定代码

var applyForRole = { 
  init: function(config){ 
    this.config = config; 
    this.bindEvents(); 
    $.ajaxSetup({ 
      url: '../../applyForRole.php', 
      type: 'POST' 
    }); 
  }, 
  bindEvents: function(){ 
    this.config.btn.remove(); 
    this.config.applyBtn = $('<input type="button" value=" Apply " id="toggleButton" \>'); 
    this.config.applyBtn.insertAfter(this.config.closeDate); 
    this.config.applyBtn.on('click', this.validateInput); 
  }, 
  validateInput: function(){ 
    var self = applyForRole; 
    var vacancyID = self.config.vacancyID.text(); 
    var roleLongTitle = self.config.roleLongTitle.text(); 
    var closeDate = self.config.closeDate.text(); 
    var roleRequirements = self.config.roleRequirements.text(); 
    var roleResponsibilities = self.config.roleResponsibilities.text(); 
    var roleQualifications = self.config.roleQualifications.text(); 

    console.log(vacancyID); 
    console.log(roleLongTitle); 
  } 
}; 

applyForRole.init({ 
  vacancyID: $('td#vacancyID'), 
  closeDate: $('td#closeDate'), 
  roleLongTitle: $('td#roleLongTitle'), 
  roleRequirements: $('td#roleRequirements'), 
  roleResponsibilities: $('td#roleResponsibilities'), 
  roleQualifications: $('td#roleQualifications'), 
  btn: $('a.btn-primary') 
}); 

问题根源 #

1. HTML ID重复：循环生成表格时，每行的单元格都用了相同的id（比如vacancyID），但HTML规范中id必须是页面唯一的，所以$('td#vacancyID')只会选中页面中第一个带有该id的单元格。
2. 事件绑定的上下文错误：初始化时获取的单元格选择器都是第一行的元素，点击按钮时自然只能拿到第一行的数据，和当前点击的行无关。

修复方案 #

第一步：把HTML中的id改成class

修改PHP循环里的td标签，将唯一ID替换为可重复的class：

<tr> 
  <td class="vacancyID"> <?php echo $vacancyID; ?> </td> 
  <td class="roleLongTitle"> <?php echo $roleLongTitle; ?> </td> 
  <td class="roleRequirements"> <?php echo $roleRequirements; ?> </td> 
  <td class="roleResponsibilities"> <?php echo $roleResponsibilities; ?> </td> 
  <td class="roleQualifications"> <?php echo $roleQualifications; ?> </td> 
  <td class="closeDate"> <?php echo convertToDate($closeDate); ?> </td> 
  <td> </td> 
</tr>

第二步：修改jQuery代码，基于点击上下文获取当前行数据

不再提前获取所有单元格，而是在点击按钮时，从当前按钮出发找到所在行，再提取该行的所有数据：

var applyForRole = { 
  init: function(config){ 
    this.config = config; 
    this.bindEvents(); 
    $.ajaxSetup({ 
      url: '../../applyForRole.php', 
      type: 'POST' 
    }); 
  }, 
  bindEvents: function(){ 
    var self = this;
    // 遍历所有行的closeDate单元格，给每一行添加按钮
    this.config.closeDate.each(function() {
      var applyBtn = $('<input type="button" value=" Apply " class="toggleButton" />');
      applyBtn.insertAfter($(this));
      applyBtn.on('click', self.validateInput);
    });
    // 移除原有按钮
    this.config.btn.remove(); 
  }, 
  validateInput: function(){ 
    // 获取当前按钮所在的行
    var currentRow = $(this).closest('tr');
    
    // 从当前行内提取对应class的单元格内容
    var vacancyID = currentRow.find('.vacancyID').text().trim(); 
    var roleLongTitle = currentRow.find('.roleLongTitle').text().trim(); 
    var closeDate = currentRow.find('.closeDate').text().trim(); 
    var roleRequirements = currentRow.find('.roleRequirements').text().trim(); 
    var roleResponsibilities = currentRow.find('.roleResponsibilities').text().trim(); 
    var roleQualifications = currentRow.find('.roleQualifications').text().trim(); 

    // 打印测试数据
    console.log(vacancyID); 
    console.log(roleLongTitle); 

    // 提交数据到目标页面
    $.ajax({
      data: {
        vacancyID: vacancyID,
        roleLongTitle: roleLongTitle,
        closeDate: closeDate,
        roleRequirements: roleRequirements,
        roleResponsibilities: roleResponsibilities,
        roleQualifications: roleQualifications
      },
      success: function() {
        // 提交成功后跳转页面
        window.location.href = '../../applicationForm.php';
      },
      error: function(xhr) {
        console.error('提交失败:', xhr.responseText);
      }
    });
  } 
}; 

// 初始化时只需要传递必要的选择器
applyForRole.init({ 
  closeDate: $('td.closeDate'), 
  btn: $('a.btn-primary') 
}); 

关键改动说明 #

1. 用class代替id：符合HTML规范，同时能正确区分每行的单元格。
2. 遍历添加按钮：原来的代码只给第一行添加了按钮，现在通过each()给每一行都生成独立的按钮。
3. 基于点击上下文获取数据：通过$(this).closest('tr')精准定位当前按钮所在的行，再用find()提取该行的所有数据，彻底解决了数据匹配错误的问题。
4. 添加trim()：去除文本前后的空白字符，避免数据中包含多余空格。

这样修改后，点击任意行的Apply按钮，就能正确获取该行的职位信息并提交到目标页面了！

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