Модификация classList с использованием jQuery

Question

У меня проблемы с изменением классов для строки таблицы.

Мой HTML

<table class="table table-light table-bordered text-center">
    <thead class="thead-dark">
    <tr>
        <th scope="col">Ava</th>
        <th scope="col">Full name</th>
        <th scope="col">Registred</th>
    </tr>
    </thead>
    <tbody>
    {{#users}}
        <tr class="table-light" id="colorised">
            <td><img src="{{avaUrl}}" width="42" height="42"/></td>
            <td><a href="users/{{_id}}" style="margin-top: 50px;">{{username}}</a></td>
            <td>{{registeredAt}}</td>
        </tr>
    {{/users}}
    </tbody>
    {{^users}}
    </br>
    <strong style="color: orange">No results for "{{searchedUsername}}"</strong>
    </br>
    </br>
    {{/users}}
</table>

И JavaScript

<script>
      $('#colorised').attr('class','table-success');
</script>

Как изменить цветстрока таблицы?

Answer 1

Чтобы выполнить ваш код после завершения загрузки DOM, чтобы он был готов к доступу или изменению, вам нужно заключить код jQuery в $(document).ready(function() {});.Предполагается, что ваш код расположен перед элементами DOM, такими как тег, или в верхней или средней части раздела перед некоторыми элементами DOM, и этот код пытается получить доступ к DOM при первой инициализации.

он должен быть помещен в блок $(document).ready(), чтобы он не выполнялся до того, как DOM будет готов. Сокращение для $(document).ready() равно $(function() {}); Вот пример кода, предоставленного вами.

$(function() {
  $('#colorised').attr('class','table-success');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-light table-bordered text-center">
    <thead class="thead-dark">
    <tr>
        <th scope="col">Ava</th>
        <th scope="col">Full name</th>
        <th scope="col">Registred</th>
    </tr>
    </thead>
    <tbody>
    {{#users}}
        <tr class="table-light" id="colorised">
            <td><img src="{{avaUrl}}" width="42" height="42"/></td>
            <td><a href="users/{{_id}}" style="margin-top: 50px;">{{username}}</a></td>
            <td>{{registeredAt}}</td>
        </tr>
    {{/users}}
    </tbody>
    {{^users}}
    </br>
    <strong style="color: orange">No results for "{{searchedUsername}}"</strong>
    </br>
    </br>
    {{/users}}
</table>

Answer 2

Вы можете переключаться между классами, чтобы переключать их:

$('#colorised').toggleClass('table-light table-success');