如何用表格的OnClick事件来改变表格的CSS

twoeo 2008-02-03 07:49:54

如题

比如想实现鼠标移动过某单元格时背景色为红色

而鼠标点击过该单元格时背景色变为黑色

要怎么实现呢?

实验证明<td onclick="this.class='asgasg'"></td>和<td onclick="this.style.background-color='#000000'"></td>不能.

...全文

153 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

cceon 2008-02-08

打赏
举报

mafengcf 2008-02-04

打赏
举报

this.style.background-color='#000000'
javascript的寫法是去掉-大寫後面的第一個字符
this.style.backgroundColor=''

yixianggao 2008-02-04

打赏
举报

L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style type="text/css">

td

{

    background-color: white;

    color: black;

}

    </style>

</head>

<body>

    <table border="1" width="100%">

        <tr>

            <td>1</td>

            <td>2</td>

        </tr>

        <tr>

            <td>3</td>

            <td>4</td>

        </tr>

    </table>

    <script type="text/javascript">

    <!--

var oTds = document.getElementsByTagName("td");

for (var i=0; i<oTds.length; i++)

{

    oTds[i].onmouseover = function()

    {

        this.style.backgroundColor = "red";

    };

    oTds[i].onmouseout = function()

    {

        this.style.backgroundColor = "white";

    };

    oTds[i].onclick = function()

    {

        if (this.currentStyle.backgroundColor != "black")

        {

            this.mouseoverFP = this.onmouseover;

            this.onmouseover = null;

            this.mouseoutFP = this.onmouseout;

            this.onmouseout = null;

            this.style.backgroundColor = "black";

        }

        else

        {

            this.onmouseover = this.mouseoverFP;

            this.onmouseout =  this.mouseoutFP;

            this.style.backgroundColor = "red";

        }



    };

}

    //-->

    </script>

</body>

</html>