将文本成功应用于带条纹的Bootstrap 5表行没有效果

发布于 2025-02-10 17:19:45 字数 2289 浏览 1 评论 0 原文

我有一个带有班级桌条的Bootstrap 5表。当使用单击一行时，我会有一些jQuery代码，可以在行上切换类文本成功，以突出显示/毫无原名。

亮点在没有条纹背景但对确实具有条纹背景的行没有影响的行上正确工作。

当我使用Bootstrap 3.7时，该技术在表中的任何行上都正确工作，

这是一些示例代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

</head>

<body>

<main class="container clearfix">
    <div class="row mt-4 mb-4">
        <div class="col-md-8 offset-md-2">
            <table id="mytable" class="table table-striped table-sm">
                <thead>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $("#mytable tbody tr").click(function () {
        $(this).toggleClass("text-success")
    })
</script>
</body>

</html>

原文

I have a Bootstrap 5 table with the class table-striped. When the use clicks on a row, I have some jQuery code that toggles the class text-success on the row to highlight/unhighlight it.

The highlight works correctly on rows that do not have the striped background but has no effect on rows that do have a striped background.

This technique worked correctly on any row in the table when I was using Bootstrap 3.7

Here's some example code.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

</head>

<body>

<main class="container clearfix">
    <div class="row mt-4 mb-4">
        <div class="col-md-8 offset-md-2">
            <table id="mytable" class="table table-striped table-sm">
                <thead>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $("#mytable tbody tr").click(function () {
        $(this).toggleClass("text-success")
    })
</script>
</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我最亲爱的 2025-02-17 17:19:45

这是因为在Bootstrap 5.1.2及以上有以下规则：

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

以上选择器在选择器方面覆盖了您的选择器，因此您只需要使您的更具体的

注意：这是固定在v5.3 中

//$("#mytable tbody tr > *").click(function() {
//  $(this).toggleClass("text-success")
//})

//arrow function version
//$("#mytable tbody tr > *").click(e => $(e.currentTarget).toggleClass("text-success"))

//updated version - OP Comment - "Great, thanks. Is there a way to highlight the whole table row instead of just the column I click one?."

$("#mytable tbody tr > *").click(e => $(e.currentTarget).parent().find('td').toggleClass("text-success"))

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<main class="container clearfix">
  <div class="row mt-4 mb-4">
    <div class="col-md-8 offset-md-2">
      <table id="mytable" class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>

That's because in bootstrap 5.1.2 and up there is this rule:

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

This selector above overrides in terms of specificity your selector, so you just need to make your more specific

Note: this is plan to be fixed in v5.3

//$("#mytable tbody tr > *").click(function() {
//  $(this).toggleClass("text-success")
//})

//arrow function version
//$("#mytable tbody tr > *").click(e => $(e.currentTarget).toggleClass("text-success"))

//updated version - OP Comment - "Great, thanks. Is there a way to highlight the whole table row instead of just the column I click one?."

$("#mytable tbody tr > *").click(e => $(e.currentTarget).parent().find('td').toggleClass("text-success"))

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<main class="container clearfix">
  <div class="row mt-4 mb-4">
    <div class="col-md-8 offset-md-2">
      <table id="mytable" class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>