Javascript 如何使整个表格可点击并在点击时添加颜色？

我有一个表，单击直角插入符号>，它是可折叠的，因此我希望对行执行可单击的折叠操作，而不是仅对角度执行

其次，我希望在同一次单击时将表格颜色更改为#e1e2

该表是使用引导类创建的

我需要一些绝望的帮助。有人能帮忙吗

$（文档）。在（“单击”、“.option选项卡”，函数（）上）{
if（$（this.children（）.hasClass（“fa直角”））{
$（this.children（）.removeClass（“fa角度右侧”）；
$（this.children（）.addClass（“fa角度向下”）；
}
其他的
{
$（this.children（）.removeClass（“fa角度向下”）；
$（this.children（）.addClass（“fa角度右侧”）；
}
});
。表td，
.表th{
左侧填充：1.75rem；
}
.表格标题{
背景色：#28283e；
颜色：#f9f9f9；
}
.accounts表：悬停{
背景色：#fafafa；
}
a、 直角{
颜色：橙色；
}

身份证件
名称
类型
状态4
最后登录
[0708]
马克·乔纳斯
客人
活跃的
22/11/2018
你好，世界

[2589]
约翰·史密斯
客人
残废
不适用
[9147]
默里·卢尤斯
嘉宾+主持人
待处理电子邮件
不适用
如果我理解正确，您需要在单击行时也执行箭头操作


为此，您需要为该行创建另一个单击处理程序，然后触发箭头单击
此外，为了简化代码，您可以使用
toggleClass（）
而不是
add/removeClass

示例


$（文档）。在（“单击“，”.option选项卡）上，函数（e）{//add（e）for event here
e、 停止传播（）//
[0708]
马克·乔纳斯
客人
活跃的
22/11/2018
你好，世界

[2589]
约翰·史密斯
客人
残废
不适用
[9147]
默里·卢尤斯
嘉宾+主持人
待处理电子邮件
不适用
一个简单的更改就可以了-但是你还需要一点jQuery来设置图标的动画，因为你没有点击它

Bootstrap的神奇之处在于它将HTML属性：
data toggle=“collapse”
和
data target=“#AccountDetails”
与具有这些class/id值的元素相匹配

因此，它与此相匹配：

data-toggle="collapse" data-target="#AccountDetails"

为此：

<div class="collapse" id="AccountDetails">


$（文档）。在（“单击”，“选项选项卡”，函数（）上）{
if（$（this.children（）.hasClass（“fa直角”））{
$（this.children（）.removeClass（“fa角度右侧”）；
$（this.children（）.addClass（“fa角度向下”）；
}
其他的
{
$（this.children（）.removeClass（“fa角度向下”）；
$（this.children（）.addClass（“fa角度右侧”）；
}
});
$（文档）。在（“单击”，“tr”，函数（）上）{
设chev=$（this.find（'td a i'）；
if（检查长度）{
if（chev.hasClass（'fa-angle-right'））{
chev.removeClass（'fa-angle-right'）。addClass（'fa-angle-down'）；
}否则{
chev.removeClass（'fa-angle-down'）。addClass（'fa-angle-right'）；
}
}
})；
。表td，
.表th{
左侧填充：1.75rem；
}
.表格标题{
背景色：#28283e；
颜色：#f9f9f9；
}
.accounts表：悬停{
背景色：#fafafa；
}
a、 直角{
颜色：橙色；
}

身份证件
名称
类型
状态4
最后登录
[0708]
马克·乔纳斯
客人
活跃的
22/11/2018
你好，世界

[2589]
约翰·史密斯
客人
残废
不适用
[9147]
默里·卢尤斯
嘉宾+主持人
待处理电子邮件
$(document).on("click","tr",function(){
    let chev = $(this).find('td a i');
    if (chev.length){
        if (chev.hasClass('fa-angle-right')){
            chev.removeClass('fa-angle-right').addClass('fa-angle-down');
        }else{
            chev.removeClass('fa-angle-down').addClass('fa-angle-right');
        }
    }
});