[HTML]table选中行效果

比如是这样一个结构的table

<table id="tUsers">
    <thead>
        <tr>
            <td>序号td>
            <td>帐号td>
            <td>密码td>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>admintd>
            <td>admintd>
        tr>
        <tr>
            <td>2td>
            <td>guesttd>
            <td>123td>
        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");//设定当前行为选中行
    });
});