如何在Django的HTML表格中点击行实现高亮并获取索引

1. 添加高亮样式 #

首先在CSS中定义选中行的高亮样式，确保能覆盖Bootstrap的默认条纹样式：

/* 行选中高亮样式 */
.table-row-selected {
    background-color: #cce5ff !important;
}

/* 保留你原有的计数器样式 */
body {
    counter-reset: section;
}

count::before {
    counter-increment: section;
    content: "  " counter(section) " ";
}

2. 优化HTML（可选但更便捷） #

在Django的循环中，给每行添加data-index属性存储索引，和你的计数器保持一致：

<table class="table table-striped table-sm" id="tab1" >
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Nº</th>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
    </tr>
  </thead>
  <tbody class="post">
    {% for post in posts %}
    <tr data-index="{{ forloop.counter }}">
      <td><input type="checkbox"></td>
      <td><b><count> </count></b></td>
      <td>{{ post.head1 }}</td>
      <td>{{ post.head2 }}</td>
      <td>{{ post.head3 }}</td>
      <td>{{ post.head4 }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

3. 编写JavaScript逻辑 #

使用事件委托绑定点击事件，适配动态生成的表格行，实现高亮和索引获取：

// 获取表格tbody元素
const tableBody = document.getElementById('tab1').querySelector('.post');

tableBody.addEventListener('click', function(e) {
    // 定位到点击的行（兼容点击td内部元素的情况）
    const targetRow = e.target.closest('tr');
    if (!targetRow) return;

    // 移除所有已选中行的高亮样式
    document.querySelectorAll('#tab1 .post tr.table-row-selected').forEach(row => {
        row.classList.remove('table-row-selected');
    });

    // 给当前点击行添加高亮
    targetRow.classList.add('table-row-selected');

    // 获取行索引：两种方式二选一
    // 方式1：从自定义属性读取（和Django计数器一致，从1开始）
    const rowIndex = targetRow.dataset.index;
    // 方式2：通过JS计算行位置（从0开始，需+1匹配计数器）
    // const allRows = Array.from(tableBody.querySelectorAll('tr'));
    // const rowIndex = allRows.indexOf(targetRow) + 1;

    // 这里可以根据需求使用索引，比如打印或传递给后端
    console.log('选中行索引：', rowIndex);
});

关键说明 #

• 事件委托：绑定事件到父元素tbody，确保Django动态生成的行也能触发点击事件，避免直接绑定到tr导致的失效问题。
• 样式覆盖：使用!important确保高亮样式优先级高于Bootstrap的table-striped默认样式。
• 索引获取：两种方式都能实现需求，使用data-index更直接，和你的计数器完全同步；JS计算则无需修改HTML结构。

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