使用jQuery修改类列表

Ilyinsky Ivan • 5 年前 • 1387 次点击

我无法更改表行的类。

我的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>

如何更改表行的颜色?

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/50189

1387 次点击

文章 [ 2 ] | 最新文章 5 年前

• 1 楼

Kiran Shahi 6 年前

要在DOM完成加载之后执行代码,以便它可以进行访问或修改,您需要将jQuery代码包装在 $(document).ready(function() {}); . 假设您的代码位于DOM元素之前,例如在标记中,或者在某些DOM元素之前的部分的顶部或中部,并且该代码确实在第一次初始化时尝试访问DOM。

所以它应该放在 $(document).ready() 块,以便在DOM准备好之前它不会执行 $(文档).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>

• 2 楼

Kate Ross 6 年前

您可以在类之间切换以切换它们:

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

登录后回复