3

仅使用纯 JavaScript：

如何单击指定的表格行，并更改所选行的背景颜色（在此示例中，让我们使用红色）。

然后，如果再次单击先前选择的同一行，则将其背景颜色更改回默认值（白色）。

这是我的 HTML：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Language" content="en-ca">

</head>

<body>

<table border="1" cellspacing="1" width="100%" id="table1">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

</body>

</html>
4

3 回答 3

10 
$(document).ready(function () {
    $('tr').click(function () {
        //Check to see if background color is set or if it's set to white.
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', 'red');
        }
        else {
            $(this).css('background', 'white');
        }
    });
});

jsFiddle 示例

于 2013-07-24T20:18:01.303 回答
6

在你的 tr 上这样的东西会起作用..

<tr onclick="this.style.backgroundColor='red'">

编辑：没有正确阅读您的问题..

这会起作用：

<script>
    function changeColor(o){
        o.style.backgroundColor=(o.style.backgroundColor=='red')?('transparent'):('red');
    }
</script>

在你的 tr 上：

<tr onclick="changeColor(this)">
于 2013-07-24T19:55:59.260 回答
3

使用 jQuery 并查看http://jsfiddle.net/X2pJN/上的示例

$('table tr').each(function(a,b){
    $(b).click(function(){
         $('table tr').css('background','#ffffff');
         $(this).css('background','#ff0000');   
    });
});
于 2013-07-24T19:56:35.353 回答