Question

我有一个看起来像这样的表：

<table class="table">
    <thead>
        <tr>
            <th>Col_1</th>
            <th>Col_2</th>
            <th>Level</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value_1_1</td>
            <td>Value_1_2</td>
            <td>Success</td>
        </tr>
        <tr>
            <td>Value_2_1</td>
            <td>Value_2_2</td>
            <td>Error</td>
        </tr>
    </tbody>
</table>

table类来自引导程序。我有一个JavaScript代码段，它遍历各行并将danger类（同样来自引导程序）应用于包含错误文本的任何行。

$(document).ready(function () {
    $("tr td:contains('Error')").parent().addClass("danger");
});

一切正常。该表的样式类似于引导表，并且包含错误消息的行的样式也正确。

然后，我在网站上添加了另一个表格。我开始意识到我在很多地方都在重复自己，所以我巩固了自己的位置。我从表中删除了该类，而是在一个更少的文件中声明了它，像这样：

@import "bootstrap/index";

table {
    .table();
}

此更改之后，我的表的样式仍然像引导表一样，但是不再具有实际的table类。这意味着错误行的样式不再正确。 Bootstrap的样式表专门查找.table > tbody > tr > td.danger，但是我的table不再具有table类。

使我的表实际上具有table类的最佳方法是什么？

我知道我可以通过JavaScript将类动态添加到元素中（如上所示），但是这样做的缺点是，当将内容添加到页面时，我必须再次调用脚本。我实际上是想摆脱上面的JavaScript代码片段，并用对动态内容更有效的东西代替它（例如，错误日志可以实时更新，而无需使用SignalR刷新页面）。

我可以使用LESS为元素提供类吗？

0 个答案: