Javascript 选择下一行时，清除以前选择的表行

我有以下代码，用于在表中选择行时创建左边框和右边框。我希望边框仅在当前选中该行时显示，而在未选中该行时消失

我附上一个模型：

函数addRowHandlers（）{
var table=document.getElementById（“示例”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=0；i
trtd:first child{左边框：2px实心透明；}
tr td:last child{右边框：2px实心透明；}

名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
约翰
雌鹿
80
请同时使用此功能：

function resetRowHandlers() {
        var table = document.getElementById("example");


        var rows = table.getElementsByTagName("tr");
        for (i = 0; i < rows.length; i++) {
        var row = table.rows[i];

        row.getElementsByTagName("td")[0].style.backgroundColor = "none"; 
        row.firstElementChild.style.borderLeft = "transparent solid 2px";
        row.lastElementChild.style.borderRight = "transparent solid 2px";


        }
    }

函数resetRowHandlers（）{
var table=document.getElementById（“示例”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=0；i

也可以在单击行时调用此函数，即createClickHandler
为当前选择样式使用一个类（我将其命名为
高亮显示
），然后单击从具有此属性的所有行中删除此类

for (var i = 0; i < table.rows.length; i++) {
     table.rows[i].classList.remove('highlight');
}

tr:not（.highlight）td:first child{边框左：2px实心透明；}
tr:not（.highlight）td:last child{border right:2px solid transparent；}
tr.highlight td:first child{border left:2px纯黑；}
tr.highlight td:last child{右边框：2px纯黑色；}

名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
约翰
雌鹿
80
在这里，我用更少的代码尝试了一种不同的方法。
如果从控制台进行检查，您将看到更改：单击事件将类添加到该行，并重置其他行的类


var mytable=document.getElementById（“示例”）；
var myrows=mytable.rows；
功能类型（el）{
Array.from（myrows.map）（e=>e.className=“”）；
el.className=“someclass”；
}
.someclass{
/*这里有东西*/
}

弗斯特
最后
年龄
约翰
雌鹿
50
爱丽丝
威尔森
40
奥托
魏宁格尔
25
首先，您应该设置类，而不是直接操作样式。当然，当选择了一个新的样式时，您必须将这些样式从以前的“选定”行中删除。在为当前行设置行之前，循环所有行并删除它们；或者将对前一行的引用存储在一个变量中。我收集到它是这样的，但是我需要一些帮助来做这件事？具体是什么？你已经循环了所有行一次，所以你已经知道如何去做了。正如CBroe所说的，你应该考虑在选定的单元格上添加一个类“Active”。（建议使用cell.className=“活动”）。然后，您可以在输入函数时“存储”单元格和删除此类。或者在您的行上循环并删除“活动”类（如果存在）。感谢您解释您所做的。谢谢。