[HTML]table选中行效果

比如是这样一个结构的table

<table id="tUsers">
    <thead>
        <tr>
            <td>序号</td>
            <td>帐号</td>
            <td>密码</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>admin</td>
            <td>admin</td>
        </tr>
        <tr>
            <td>2</td>
            <td>guest</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

首先我们定义一个选中行的样式

tr.focus{
    background-color:#eee;
}

然后就写js咯（记得先引入jQuery）

$(document).ready(function () {
    $("#tUsers>tbody>tr").on("click", function () {
        $(this).parent().find("tr.focus").toggleClass("focus");//取消原先选中行
        $(this).toggleClass("focus");//设定当前行为选中行
    });
});