jQuery:表解析器和CSS更改 [英] JQuery: table parser and CSS change

问题描述

我有一个以下格式的表:

I have a table in the following format:

<table id="searchResultTable">
    <tr>
        <th>List</th>
    </tr>

    <tr onMouseOver="activeTr(this)"
        onMouseOut="inactiveTr(this)" onClick="showDetails(TODO)">
        <td><a href="javascript: void(0)">AAA</a></td>
    </tr>

    <tr onMouseOver="activeTr(this)"
        onMouseOut="inactiveTr(this)" onClick="showDetails(TODO)">
        <td><a href="javascript: void(0)">BBB</a></td>
    </tr>
</table

以下CSS:

table#searchResultTable td {
    text-align: left;
    border-bottom: 1px solid #ECD7C2;
}
.bold {
    font-weight: bold;
}

以及以下JS函数:

function activeTr( row ) {
    row.bgColor='#ECD7C2';
    document.body.style.cursor = 'pointer';
}

function inactiveTr( row ) {
    row.bgColor='transparent';
    document.body.style.cursor = 'default';
}

到目前为止，一切正常.但是现在我试图将所选行的类替换为.bold，并且必须从所有其他未选择的行中删除相同的类-这就是showDetails(TODO)应该做的.我进行了几次尝试(包括基于

Everything works fine so far. But now I'm trying to replace the class for selected row to .bold and have to remove the same class from all other unselected rows - that's what showDetails(TODO) should do. I made several attempts (including based on the content as described here), but couldn't get it to work.

请指出正确的方向(jQuery会很棒；).非常感谢！

Please point me in the right direction (JQuery would be great ;). Many thanks!

推荐答案

尝试一下. 桌子(头和身体):

Try this. Table (with head and body):

<table id="searchResultTable">
    <thead>
        <tr>
                <th>List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
                <td><a href="javascript: void(0)">AAA</a></td>
        </tr>

        <tr>
                <td><a href="javascript: void(0)">BBB</a></td>
        </tr>
    </tbody>
</table>

添加一个新的CSS类:

add a new css class:

.active{
    background-color: #fab;
}

和一些jquery魔术:

and some jquery magic:

<script type="text/javascript">
        var activeRow;
        $(function() {
            $("#searchResultTable tbody tr").hover(function() {
                this.bgColor = '#ECD7C2';
                document.body.style.cursor = 'pointer';
            }, function() {
                this.bgColor = 'transparent';
                document.body.style.cursor = 'default';
            }).
            click(function() {
                $(activeRow).removeClass("active");
                $(this).addClass("active");
                activeRow = this;
            });
        });



    </script>

请注意，通过这种方式，您的html不会被Javascript代码污染，视图和逻辑之间的良好分隔.

Notice that in this way your html is not poluted with Javascript code, good separation of view and logic.

这篇关于jQuery:表解析器和CSS更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！