如何用jQuery/JavaScript点击编辑图标时高亮选中表格行

没问题，我来帮你搞定点击编辑图标高亮表格行的需求！下面是完整的实现方案，包含PHP表格完善、CSS高亮样式和JS交互逻辑：

第一步：完善你的PHP表格结构 #

先把你截断的表格代码补全，并且给每行和编辑按钮加上data-row-id关联标识，这样后续JS能精准定位到对应的行：

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Detail</th>
      <th>Image</th>
      <th>Created</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <?php if(!empty($servicedata)): foreach($servicedata as $service): ?>
    <!-- 给每行加data-row-id属性，关联服务ID -->
    <tr data-row-id="<?php echo $service['id']; ?>">
      <td><?php echo $service['id']; ?></td>
      <td><?php echo $service['title']; ?></td>
      <td><?php echo $service['detail']; ?></td>
      <td><img src="<?php echo $service['image_path']; ?>" alt="Service Image" width="50"></td>
      <td><?php echo $service['created_at']; ?></td>
      <td>
        <!-- 编辑按钮也加相同的data-row-id，方便和行关联 -->
        <button class="btn btn-sm btn-primary edit-btn" data-row-id="<?php echo $service['id']; ?>">
          <i class="fa fa-edit"></i> Edit
        </button>
      </td>
    </tr>
    <?php endforeach; else: ?>
    <tr>
      <td colspan="6" class="text-center">No service data found</td>
    </tr>
    <?php endif; ?>
  </tbody>
</table>

第二步：添加高亮样式（CSS） #

定义一个清晰的高亮样式，和Bootstrap的风格保持兼容，你也可以根据自己的需求调整颜色：

/* 高亮选中行的样式 */
.table-highlight {
  background-color: #fff3cd !important; /* Bootstrap警告色的浅版，醒目且不刺眼 */
  border-left: 4px solid #ffc107; /* 左侧加个显眼的黄色边框，快速识别选中行 */
}

第三步：实现点击编辑高亮的交互（JS） #

这里提供两种方案，优先推荐jQuery版本（因为Bootstrap默认依赖jQuery），也给原生JS版本供你选择：

jQuery版本 #

$(document).ready(function() {
  // 点击编辑按钮时触发高亮
  $('.edit-btn').click(function(e) {
    e.preventDefault();
    // 获取当前按钮对应的行ID
    const rowId = $(this).data('row-id');
    
    // 先移除所有行的高亮样式，避免多个行同时高亮
    $('.table tbody tr').removeClass('table-highlight');
    
    // 给目标行添加高亮样式
    $(`tr[data-row-id="${rowId}"]`).addClass('table-highlight');
    
    // 可选：平滑滚动到高亮行，方便长表格定位
    $(`tr[data-row-id="${rowId}"]`)[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
  });
  
  // 可选：点击页面其他空白区域取消高亮
  $(document).click(function(e) {
    if (!$(e.target).closest('.edit-btn, .table-highlight').length) {
      $('.table tbody tr').removeClass('table-highlight');
    }
  });
});

原生JavaScript版本（无jQuery依赖） #

document.addEventListener('DOMContentLoaded', function() {
  const editButtons = document.querySelectorAll('.edit-btn');
  
  editButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      const rowId = this.dataset.rowId;
      
      // 移除所有行的高亮样式
      const allRows = document.querySelectorAll('.table tbody tr');
      allRows.forEach(row => row.classList.remove('table-highlight'));
      
      // 给目标行添加高亮样式
      const targetRow = document.querySelector(`tr[data-row-id="${rowId}"]`);
      if (targetRow) {
        targetRow.classList.add('table-highlight');
        // 平滑滚动到高亮行
        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    });
  });
  
  // 可选：点击其他区域取消高亮
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.edit-btn') && !e.target.closest('.table-highlight')) {
      const allRows = document.querySelectorAll('.table tbody tr');
      allRows.forEach(row => row.classList.remove('table-highlight'));
    }
  });
});

额外说明 #

• 用data-row-id关联行和按钮，比用索引更可靠，避免分页或排序后索引错乱的问题。
• 高亮样式用了!important是为了覆盖Bootstrap默认的table-striped条纹样式，确保高亮生效。
• 平滑滚动和点击空白取消高亮都是提升用户体验的细节，你可以根据需求选择是否保留。

内容的提问来源于stack exchange，提问作者Kh.Mubashar Irshad