时间戳

首页 > 解决方案 > 行单击时未在数据表上删除 JQuery 类

html - 行单击时未在数据表上删除 JQuery 类

问题描述

我为使用 JQuery 和数据表时遇到的问题创建了一个 JS Fiddle：https ://jsfiddle.net/f3xme87n/

我有一个复选框列，允许用户一次选择最多 5 个项目。然后，用户可以选择一次只能是一行的主行（以黄色突出显示）。目前，当您取消选中一个选定的框时，它会将行突出显示为黄色，这不是我想要的。

要复制错误：

  1. 按住 Cntrl 并单击 5 个复选框项目（您可以选择的最大值），这些项目应以浅蓝色突出显示。
  2. 现在单击一个选定的名称，该行变为黄色，这是预期的
  3. 现在单击另一个名称，该行变为黄色，上一行恢复正常颜色
  4. 现在取消选中您选择的框之一（不是当前的黄色框） - 按住 Cntrl

错误：该行保持黄色但未选中。我需要这个恢复到正常的表格行颜色，所以不应该将主类应用于该行。

当您取消选中该框时，我似乎可以弄清楚如何删除主要课程！希望 JS Fiddle 及以上的复制细节对我的问题有所帮助。

问题在于JS中的这部分代码：

if (this.classList.contains('selected')) {        
    var prevSelectedItem = document.querySelector('tr.primary');

    if (prevSelectedItem != null) {
        prevSelectedItem.classList.remove('primary');
    }

    this.classList.add("primary");
}

我需要在 Javascript 中确保 - 如果行的颜色已经被选中（即蓝色），用户只能将行的颜色设置为黄色，否则行根本不能变为黄色。

附加信息：

检查复选框的方式是通过 css ::before 和 ::after。如何检索 CSS 以了解之前和之后是否应用于我的，因为这就是我如何确定复选框是否被勾选：

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
    content: '';
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid black;
    border-radius: 3px;
}


table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

标签： htmljquery

解决方案

您可以根据此添加类检查tr单击的是否具有类或从中删除相同的类。selectedtr

演示代码：

$(document).ready(function() {

  var table = $('#tabledt').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: [0]
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'

    },
    order: [
      [1, 'asc']
    ],
    bSortClasses: false
  });

  table.on('select', function(e, dt, type, ix) {
    var selected = dt.rows({
      selected: true
    });


    if (selected.count() > 5) {
      dt.rows(ix).deselect();
    }
    //remove class...
    $("tbody tr:not(.selected)").removeClass("primary")
  });

  //on click of tr
  $(document).on("click", "#tabledt tr", function() {

    if ($(this).hasClass("selected")) {
      //check if slectd class length is > 1
      if ($("tbody").find(".selected").length > 1) {
        $(this).removeClass("primary") //remove that primary class
        $("tbody tr.selected").removeClass("primary")
      } else {
        //add class
        $(this).addClass("primary") //add primary

      }
    } else {
      $(this).removeClass("primary") //remove that primary class

    }
    //just other way to remove class
    $("tbody tr:not(.selected)").removeClass("primary")

  })



});
table.dataTable th.selectall-checkbox,
table.dataTable td.selectall-checkbox {
  cursor: pointer;
  outline: none;
  text-align: center;
}

.primary {
  background-color: yellow !important;
}

.selected {
  background-color: #acbad4;
}
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<style>
  table.dataTable th.selectall-checkbox,
  table.dataTable td.selectall-checkbox {
    cursor: pointer;
    outline: none;
    text-align: center;
  }
  
  .primary {
    background-color: yellow !important;
  }
  
  .selected {
    background-color: #acbad4;
  }
</style>
<table id="tabledt" class="display" style="width:100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td></td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td></td>
      <td>Gloria Little</td>
      <td>Systems Administrator</td>
      <td>New York</td>
      <td>59</td>
      <td>$237,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>$132,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

推荐阅读