Question

我无法更改表行的类。

我的HTML

module

和JavaScript

<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 1

您可以在各类之间切换以切换它们：

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

Answer 2

要在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>

使用jQuery修改classList

2 个答案: