如何使用jQuery只选择一行表

I have created a table on my application same following code

我已经在我的应用程序上创建了一个与以下代码相同的表

<table class="spreadsheet">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

I select a row by click with following jQuery code

点击下面的jQuery代码，选择一行

 $("tr").click(function(){
 $(this).toggleClass("otherstyle");
}

and my css is

我的css是

tr.otherstyle td
{
    background-color: #d1db3e;
    color:#000;
}

I would like when I click on a row, other rows be unselected, and just one row be selected.

我希望当我单击一行时，其他行未被选中，而只有一行被选中。

How we could create this?

我们如何创造这个呢?

3 个解决方案

#1

$("table.spreadsheet tr").click(function(){
    $("table.spreadsheet tr").removeClass("otherstyle");
    $(this).toggleClass("otherstyle");
});

See a working demo

看到一个演示工作

#2

$("tr").click(function(){

 $('tr').removeClass("otherstyle");
 $(this).toggleClass("otherstyle");

}

或

$("tr").click(function(){     

 $(this).toggleClass("otherstyle").siblings().removeClass("otherstyle");

}

#3

For sake of performance, I'd change rahul's answer to

为了表现的更好，我将改变拉胡尔的答案

$("table.spreadsheet tr").click(function(){
    $("table.spreadsheet tr").removeClass("otherstyle");
    $(this).addClass("otherstyle"); // avoid checking if it has the class "otherstyle"
                                      // because it does not
});

Not that'd be a real kill, but hey, shouldn't we always write fast/optimized code?

这并不是真正的杀手锏，但是嘿，难道我们不应该一直写快速/优化的代码吗?

#1

$("table.spreadsheet tr").click(function(){
    $("table.spreadsheet tr").removeClass("otherstyle");
    $(this).toggleClass("otherstyle");
});