Nano Hash - криптовалюты, майнинг, программирование

Динамическое изменение цвета фона таблицы данных

Невозможно изменить цвет фона таблицы данных с помощью jquery. Я попытался показать пример ниже, но когда вы запустите его, он не совсем репрезентативен для проблемы. Мне нужно изменить фон всей таблицы на черный, когда пользователь что-то нажимает. Я понял, что это одна строка, которая изменяет некоторые ячейки, но не другие. Кроме того, ячейки меняются обратно, когда таблица обновляется данными. Не очень хорошее решение по обеим этим причинам.

jQuery('#tablepress-1_wrapper  td:gt(0)').css('background-color', '#000000');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tablepress-1_wrapper" class="dataTables_wrapper no-footer" style="background-color: rgb(0, 0, 0);">
  <div class="dataTables_length" id="tablepress-1_length"><label>Show <select name="tablepress-1_length" aria-controls="tablepress-1" class=""><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div>
  <div id="tablepress-1_filter"
    class="dataTables_filter"><label>Search:<input class="" placeholder="" aria-controls="tablepress-1" type="search"></label></div>
  <table id="tablepress-1" class="tablepress tablepress-id-1 dataTable no-footer" role="grid" aria-describedby="tablepress-1_info" style="width: 1203px; background-color: rgb(0, 0, 0);">
    <caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;"><a href="https://example.com/wp-admin/admin.php?page=tablepress&amp;action=edit&amp;table_id=1">Edit</a></caption>
    <tbody>

      <tr role="row" class="odd">
        <td class="sorting_1">Promise Strategy</td>
        <td>Bitmex</td>
        <td>0</td>
        <td>0.00000000</td>
        <td>1h:38m</td>
        <td><a href="#"><i class="fas fa-trash delIns" value="13"></i></a></td>
      </tr>
    </tbody>
    <thead>
      <tr role="row">
        <th class="sorting_asc" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 361px;" aria-label=": activate to sort column descending" aria-sort="ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 155px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 53px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 245px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 163px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 58px;" aria-label=": activate to sort column ascending"></th>
      </tr>
    </thead>
  </table>
  <div class="dataTables_info" id="tablepress-1_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div>
  <div class="dataTables_paginate paging_simple_numbers" id="tablepress-1_paginate"><a class="paginate_button previous disabled" aria-controls="tablepress-1" data-dt-idx="0" tabindex="0" id="tablepress-1_previous">Previous</a><span><a class="paginate_button current" aria-controls="tablepress-1" data-dt-idx="1" tabindex="0">1</a></span>
    <a
      class="paginate_button next disabled" aria-controls="tablepress-1" data-dt-idx="2" tabindex="0" id="tablepress-1_next">Next</a>
  </div>
</div>

jquery css datatables
13.08.2018

  • Ваш код javascript говорит применить цвет фона ко всем td с индексом больше 0. Вы хотите применить цвет фона к таблице или td? 13.08.2018
  • Я хочу применить его ко всей таблице 13.08.2018

Ответы:


1

Управляйте стилем с помощью CSS. Создайте класс для цвета фона (например: .backBackground) и добавьте его в таблицу с помощью jQuery следующим образом:

$('#tablepress-1').addClass('blackBackground');

Вы можете легко удалить его следующим образом:

$('#tablepress-1').removeClass('blackBackground');

Ваш новый класс CSS выглядит так:

.blackBackground{
    background-color: #000;
}

Вот рабочая копия -> https://jsfiddle.net/rk2gayse/6/

13.08.2018
  • @xendi только что исправил селектор и добавил рабочий пример. 13.08.2018
  • Спасибо. Я ценю это, но по какой-то причине это не работает на моей странице. Я не уверен, почему. 13.08.2018
  • Вы можете увидеть это, перейдя по этой ссылке и перейдя в Bot Commander: inx.lv/0pt 13.08.2018
  • У вас есть этот селектор CSS, примененный к td, перезаписывающий стиль -> .tablepress .odd td . Добавьте этот новый body.wp-night-mode-on .tablepress td с фоном 13.08.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..