Bootstrap 3标签页：选中DataTables行时修改editSelectedButton背景颜色

问题分析 #

原代码未生效的核心原因：

• 表格选择器错误：代码里用了#sigTable，但实际表格ID是signageTable和signageTableAhead
• 目标元素选择错误：editSelectedButton是按钮本身，却试图修改其父级<a>标签的颜色，且需求是修改背景色而非文字颜色
• 未正确初始化DataTables实例：代码里的table变量未定义，导致清除选中行的逻辑失效
• HTML结构不规范：第一个表格的<tbody>里直接放置<div>，不符合HTML标准，可能干扰事件绑定

修复步骤 #

1. 修正HTML结构 #

将表格内的控制元素移出<tbody>（tbody仅允许包含tr标签）：

<div class="tab-content">
  <div class="tab-pane fade active in" id="tab-today">
    <!-- 把控制元素移到表格外 -->
    <div class="inline-header-elements">
      <input id="clear-checkboxes" type="checkbox">
      <label for="clear-checkboxes">Clear all</label>
      <div class="display-options">
        L (Landscape), P (Portrait), I (Small Displays), D (Default Image)
      </div>
    </div>
    <table name="timeline" border="0" cellpadding="0" cellspacing="0" class="table table-striped" id="signageTable" width="100%" data-role="datatable" data-info="false">
      <thead>
        <tr class="ColHeader"></tr>
      </thead>
      <tbody class="CurrentSignage-rows"></tbody>
    </table>
  </div>
  <div class="tab-pane fade" id="tab-planned">
    <table name="timelineahead"  id="signageTableAhead" 
          border="0" cellpadding="0" cellspacing="0" class="table table-striped"width="100%" data-role="datatable" data-info="false">
      <thead>
        <tr class="CenterHeaderSignageData"> </tr>
      </thead>
      <tbody class="CurrentSignage-rows"></tbody>
    </table>
  </div>
</div>
<!-- 其余标签页代码保持不变 -->

2. 编写正确的JavaScript代码 #

初始化DataTables实例，绑定行点击事件并控制按钮样式：

// 初始化两个表格的DataTables实例
var tableToday = $('#signageTable').DataTable();
var tablePlanned = $('#signageTableAhead').DataTable();

// 给所有表格行绑定点击事件
$('.table-striped tbody').on('click', 'tr', function() {
  var $currentRow = $(this);
  var $editButton = $('#editSelectedButton');
  // 获取当前行所属的表格实例
  var currentTable = $currentRow.closest('.table-striped').DataTable();

  // 清除当前表格内的其他选中行
  currentTable.$('tr.selected').removeClass('selected');

  if ($currentRow.hasClass('selected')) {
    // 取消选中状态，恢复按钮默认样式
    $currentRow.removeClass('selected');
    $editButton.css('background-color', '');
  } else {
    // 设置选中状态，修改按钮背景色
    $currentRow.addClass('selected');
    $editButton.css('background-color', '#dc3545'); // 可替换为你需要的颜色值
  }
});

3. 可选：用CSS类优化样式控制 #

推荐用CSS类代替直接修改行内样式，便于维护：

.btn-edit-active {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

修改JavaScript中的样式控制逻辑：

if ($currentRow.hasClass('selected')) {
  $currentRow.removeClass('selected');
  $editButton.removeClass('btn-edit-active');
} else {
  $currentRow.addClass('selected');
  $editButton.addClass('btn-edit-active');
}

关键说明 #

• 同时处理两个表格的行点击事件，确保切换标签页后功能正常
• 直接操作#editSelectedButton按钮本身，修改其背景色属性
• 利用DataTables实例的$()方法精准选中当前表格内的行，避免跨表格干扰
• 修正HTML结构保证浏览器正常渲染，避免事件绑定异常

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