点击表格行内按钮无法正确高亮对应行的技术求助

我开发了一套系统，当合同达到或超过到期日时，会在表格中停用该合同。我希望实现的功能是：点击表格行内的按钮时，仅高亮对应的该行，以此标记“已停用”状态。

我尝试了以下几种方案，但均未达到预期效果：

方案1：仅能高亮一行，无法高亮指定行 #

/* 可运行，但仅能高亮一行，无法高亮指定行 */
function selectRow() {
  document.querySelector("input[type='button']").addEventListener('click', function() {
    $(this).closest('tr').css('background-color', 'red');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
  </tbody>
</table>

问题原因：document.querySelector只会匹配第一个按钮元素，每次点击按钮时才给第一个按钮绑定点击事件，其他按钮无法触发高亮逻辑。

方案2：需要双击才能触发点击事件 #

/* 可运行，但需要双击才能触发点击事件 */
function selectRow() {
  $('td input[type="button"]').on('click', function() {
    $(this).closest('tr').css('background-color', 'red');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
  </tbody>
</table>

问题原因：每次点击按钮时才给所有按钮绑定点击事件，第一次点击仅完成事件绑定操作，第二次点击才会触发高亮逻辑，因此需要双击才能生效。

方案3：会高亮所有表格行 #

/* 可运行，但会高亮所有表格行 */
function selectRow() {
  var tbl = document.querySelector("table tbody");
  [...tbl.rows].forEach(el => {
    el.classList.toggle('table-danger');
  });
}

.table-danger {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate" onclick="selectRow();" /></td>
    </tr>
  </tbody>
</table>

问题原因：逻辑是遍历表格所有行并切换高亮类，因此点击任意按钮都会对所有行执行高亮/取消高亮操作。

正确实现方案 #

这里提供两种简单有效的实现方式：

方式1：通过内联事件传递当前按钮元素 #

直接在onclick中把当前按钮对象传给函数，函数里直接定位到对应行进行高亮：

function selectRow(btn) {
  // 找到按钮所在的行，添加高亮样式
  $(btn).closest('tr').addClass('table-danger');
  // 如果需要支持切换高亮状态，用toggleClass代替addClass
  // $(btn).closest('tr').toggleClass('table-danger');
}

.table-danger {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button" class="btn btn-danger btn-sm" value="Deactivate" onclick="selectRow(this);" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button" class="btn btn-danger btn-sm" value="Deactivate" onclick="selectRow(this);" /></td>
    </tr>
  </tbody>
</table>

注意：移除了重复的id="deac"，同一个页面中id必须唯一。

方式2：使用事件委托（推荐） #

不需要内联onclick，通过jQuery的事件委托给表格绑定事件，更符合现代前端开发规范：

// 页面加载完成后绑定事件
$(document).ready(function() {
  $('#datatablesSimple').on('click', '.btn-deactivate', function() {
    $(this).closest('tr').addClass('table-danger');
    // 切换状态用toggleClass
    // $(this).closest('tr').toggleClass('table-danger');
  });
});

.table-danger {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatablesSimple">
  <thead>
    <tr>
      <th>Solicitor</th>
      <th>End Date</th>
      <th>Days to Go</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Dummy1</td>
      <td>2022-10-20</td>
      <td>4</td>
      <td><input type="button" class="btn btn-danger btn-sm btn-deactivate" value="Deactivate" /></td>
    </tr>
    <tr>
      <td>Dummy2</td>
      <td>2022-4-26</td>
      <td>200</td>
      <td><input type="button" class="btn btn-danger btn-sm btn-deactivate" value="Deactivate" /></td>
    </tr>
  </tbody>
</table>

优势：即使表格后续通过JS动态添加行，按钮依然能触发高亮逻辑，无需重复绑定事件。

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