Javascript 在单击时添加css类赢得'；t应用于所有行-引导表

我正在添加一个css类，它应该为当前单击的行着色， 我意识到它在每一排都起作用， 第一排不起作用，第二排会起作用等等，我不明白为什么会这样

我还必须说，我在视图中使用引导表，表行是动态创建的，但它们都应该是相同的

以下是添加行后我的表的外观：

我注意到默认情况下，行的颜色不同，我想这就是引导表的工作原理

这就是我选择第二行时发生的情况，它看起来像这样：

但当我点击第1行和第3行时，即使我在查看页面时看到该类应用于我选择的行，也不会发生任何事情

我的js：

$('#TableItems').on('click', 'tr', function (e) {
    $(this).addClass('lol').siblings().removeClass('lol');
});

我的css：

.lol
{
    background: gray;
}

您可以将类附加到

td

，并使CSS更具体地覆盖已经应用的规则

CSS:

#TableItems>tbody>tr>td.lol
{
    background-color: gray;
}

$('#TableItems').on('click', 'tr', function (e) {
  $('td',this).addClass('lol');
  $(this).siblings().find('td').removeClass('lol');
});

JS:

#TableItems>tbody>tr>td.lol
{
    background-color: gray;
}

$('#TableItems').on('click', 'tr', function (e) {
  $('td',this).addClass('lol');
  $(this).siblings().find('td').removeClass('lol');
});

希望这有帮助

$（'TableItems'）。在（'click'，'td'，函数（e）上{
$（'td'）.sides（）.addClass（'lol'）；
$（this）.closest（'tr'）.sides（）.find（'td'）.removeClass（'lol'）；
console.log（$（this.prop（'id'））；
});
#TableItems>tbody>tr>td.lol
{
背景颜色：灰色；
}

A.
B
C
D
E
测试id 1
测试id 2
如果您必须使用
！重要信息
覆盖当前应用的任何样式的规则，例如在引导
表条带化
类上。考虑创建一个执行专用样式函数的类的列表，并适当地命名，以确保它们完全是显而易见的。
下面的示例已将您的
.lol
类重命名为
.greyBackground\u OVERRIDE
，这表示您已重写元素上以前存在的任何值

请注意，如果您不了解您在哪里使用
！重要规则
它可能会在以后导致严重的样式问题


$（'TableItems'）。在（'click'，'tr'，函数（e）上{
$（this）.addClass（'greyBackground\u OVERRIDE'）.sides（）.removeClass（'greyBackground\u OVERRIDE'）；
});
/*
我建议对这些类型的类使用_OVERRIDE命名约定
*/
.greyBackground\u覆盖
{
/* 
使用！重要规则，使此样式优先于任何其他样式。
*/
背景：灰色！重要；
}

试验
测试2
1.
2.
3.
4.
5.
6.
7.
8.
9
10
JS应该是：

        $('#TableItems').on('click', 'tr', function (e) {
            $(this).parent().find('tr').removeClass('lol');
            $(this).addClass('lol');
        });

提供您的html文件？
.lol{background:gray！important；}
试试这一次，请同时发布标记，如果可能的话，使用代码片段创建一个“不要开始修复
的问题”！重要信息
，这只会进一步导致更多问题。IMHO-CSS很快就会以每一行被标记为
而结束！重要信息
Zakaria Acharki检查链接本身。已经有颜色的行没有得到新的颜色如果您在代码段中将jquery.js脚本引用移动到bootstrap.js引用之上，它将在您的示例中消除该脚本错误。@ZakariaAcharki有效，但是你能解释一下为什么这个例子有效而我的例子无效吗？因为特定的规则必须比CSS规则中不太具体的规则具有最大优先级，当引导程序已经有了针对
td
的更具体的规则并更改其颜色
。table hover>tbody>tr>td
时，您的规则将针对具有
lol
类的任何元素。。若要覆盖它，您应该制定一条规则，该规则应如我的答案所提供的那样更加具体。。那个why@ZakariaAcharki谢谢，伙计，如果这行和
td
中的每一行都有一些id，为什么我不能通过
$（this.data（'id'））访问它？不客气，应该使用
$（this.attr（'id'）检索您
或
$（this.prop（'id'）。