javascript 单击时更改行的颜色

apeeds0o 于 2023-06-28 发布在 Java

关注(0)|答案(3)|浏览(91)

仅使用纯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>

JavaScript

来源：https://stackoverflow.com/questions/17843478/changing-the-color-of-a-row-on-click

3条答案

按热度按时间

qacovj5a1#

$(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 Example

赞(0）回复(0）举报 2023-06-28

w6mmgewl2#

像这样的东西在你的树上会起作用。

<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)">

赞(0）回复(0）举报 2023-06-28

ne5o7dgx3#

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

$('table tr').each(function(a,b){
    $(b).click(function(){
         $('table tr').css('background','#ffffff');
         $(this).css('background','#ff0000');   
    });
});

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 单击时更改行的颜色

3条答案

相关问题

热门标签

最新问答