突出显示数据表中选定的行

Question

我有一个使用 DataTables 库的表，该表出现在带有数据的模式中。这里的想法是，我将单击一行，将信息加载到文本区域中。我已经完成了所有这些工作。我想要做的是让选定的行保持突出显示。我已经尝试了多个版本，但仍然没有得到想要的结果。

我有一个干净的小提琴，显示模式和返回表格的精简版本：https://jsfiddle.net/yogx3ksf/1/在这个小提琴中

我尝试用这个小提琴添加选择JS，但仍然无法让它工作

https://jsfiddle.net/dw1jrohx/

var columns = []; // Initialize columns variable globally

$(document).ready(function() {
  var table = $('#customerTable').DataTable({
        select: {
            style: 'single'
        }
    }); // Initialize DataTables with select

  var secondTable = null; // Initialize secondTable variable

  $('#customerTable tbody').on('click', 'tr', function() {
    var userId = $(this).data('userid');

    console.log("Clicked on row with userId:", userId);

Answer 1

确保包含 DataTables Select 插件，因为它是选择功能所必需的。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>

集成 DataTables Select 插件以及正确处理行选择和突出显示后，您的代码应如下所示：

$(document).ready(function() {
  var table = $('#customerTable').DataTable({
    select: {
      style: 'single'
    }
});

$('#customerTable tbody').on('click', 'tr', function() {
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
  } else {
    table.$('tr.selected').removeClass('selected');
    $(this).addClass('selected');
  }
  var userId = $(this).data('userid');
  console.log("Clicked on row with userId:", userId);
 });
});