Класс jQuery не удаляется из таблицы данных при щелчке по строке

ProgramBox

Класс jQuery не удаляется из таблицы данных при щелчке по строке

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#html #jquery

#HTML #jquery

Вопрос:

Я создал скрипку JS для проблемы, с которой я сталкиваюсь, используя jQuery с таблицами данных: https://jsfiddle.net/f3xme87n /

У меня есть столбец с флажками, который позволяет пользователям выбирать максимум 5 элементов одновременно. Затем пользователь может выбрать основную строку, которая может содержать только одну строку за раз (выделена желтым цветом). В настоящее время, когда вы снимаете флажок с выбранного поля, строка выделяется желтым цветом, что не то, что я хочу, чтобы это делало.

Чтобы воспроизвести ошибку:

Удерживайте Cntrl и нажмите 5 флажков (максимум, который вы можете выбрать), они должны выделиться светло-синим цветом.
Теперь нажмите на имя одного из выбранных, строка станет желтой, что ожидается
Теперь нажмите на другое имя, строка станет желтой, а предыдущая строка вернется к нормальному цвету
Теперь снимите один из флажков с того, что вы выбрали (не текущий желтый) — держите 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;
}

1. this.classList.toggle("primary",isTheCheckBoxChecked)

2. Что такое: проверен ли флажок? Как мне использовать эту переменную. Извините, можете ли вы подробнее объяснить это предложение

3. Любое логическое значение, которое вы можете получить из вашего datatable. Нравится this.classList.toggle("primary",this.closest("tr").querySelector(".select-checkbox")) или что-то в этом роде. У меня нет времени на расследование, поэтому ответа нет

4. Попробовал это, но он просто возвращается с тегом <tr> — это не определяет, установлен ли он или нет

Ответ №1:

Вы можете проверить, имеет ли tr выбранный класс selected в зависимости от этого добавления класса или удаления его из tr .

Демонстрационный код :

 $(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>

1. Похоже, это не полностью соответствует требованиям. Но я думаю, что это близко. Мне нужно, чтобы каждая строка при щелчке флажка отображалась как следующий шестнадцатеричный цвет #acbad4. Когда вы снимаете флажок, он должен удалить этот шестнадцатеричный цвет. Когда вы щелкаете по ОДНОЙ СТРОКЕ за раз, и это должно быть другое событие и выделяться желтым цветом. Вы можете выбрать строку, только если она уже была отмечена. Имеет ли это смысл? В приведенном выше коде отсутствует возможность щелкнуть по строке (которая была в моей оригинальной скрипке)

2. Привет, я обновил свой ответ .. извините, что я сначала не понял ваш вопрос .. дайте мне знать, если это то, что вы хотели.

3. Извините, это не то, что я хотел — трудно объяснить, так что это не ваша вина: 1. Когда вы устанавливаете флажок, строка должна быть серой 2. Когда вы снимаете флажок, строка должна иметь исходный цвет таблицы 3. Когда вы нажимаете на строку, то есть на столбец name или где-либо еще в этой строке, она должна быть желтой, что должно перезаписать серый цвет для этой строки. Вы можете выбрать не более 5 элементов флажка. Одновременно можно щелкнуть только по одной строке. Итак, в одном сценарии я бы ожидал проверки 5 строк. 4 из них серые, 1 из них желтый. Когда я снимаю флажок, он возвращается к исходному цвету

4. jsfiddle.net/f3xme87n Этот JS Fiddle — хороший пример, и большая его часть работает. Вы можете попробовать выбрать строки и флажки. Проблема в том, что когда вы снимаете флажок, он не возвращается к исходному цвету. Он остается желтым. Это ошибка

5. Хорошо, я рассмотрю это завтра.. Кроме того, дайте мне знать, какие проблемы есть в моем текущем коде.

Ответ №2:

    table.on("deselect", function (e, dt, type, ix) {
      dt.rows(ix).nodes().to$().removeClass("primary");
    });



     if (
            !e.target.className.includes("select-checkbox") amp;amp;
            this.classList.contains("selected")
          ) {
            var prevSelectedItem = document.querySelector("tr.primary");
            if (prevSelectedItem != null) {
              prevSelectedItem.classList.remove("primary");
            }
            this.classList.add("primary");
          }

Ответ №3:

Вам просто нужно запретить обработчик щелчков, когда он появляется из этого флажка:

 table.rows[i].onclick = function ({originalTarget:ot}) {
    if($(ot).hasCElass("select-checkbox")) return;
    /* ... */
};

Редактировать:

Отвечая на ваш комментарий: если я правильно понял ваше намерение, этот jsfiddle работает для меня.

Возможно, вы пытаетесь использовать старый браузер, не поддерживающий деструкцию.

Попробуйте это вместо:

 table.rows[i].onclick = function (ev) {
    if($(ev.originalTarget).hasCElass("select-checkbox")) return;
    /* ... */
};

orininalTarget — это свойство переданного объекта события, которое указывает на фактический элемент DOM, который получил щелчок (даже если, как в вашем случае, вы прослушивали внешний элемент, который его содержит).

1. Я попытался добавить это, но, похоже, это не сработало. Что такое originalTarget? Против каждой строки установлен флажок. См. Обновлено jsfiddle.net/0672fbr1 с предложением, которое вы сказали

2. Для меня это работает (если я вас правильно понял). Подробнее см. Мой отредактированный ответ…

Метки: Класс jQuery не удаляется из таблицы данных при щелчке по строке