我想实现一些网页效果,请高手指点.

freecars 2008-01-27 10:47:52

代码如下:
<table width="590" height="61" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="280"><label>
<input type="checkbox" name="checkbox" value="checkbox" />
aaa</label></td>
<td width="304"> </td>
</tr>
<tr>
<td><input name="checkbox" type="checkbox" id="checkbox" value="checkbox" />
bbb</td>
<td> </td>
</tr>
</table>

我要的效果是:
1、鼠标经过表格,表格变红色,鼠标离开,表格白色.
2、鼠标点击表格，复选框选中，表格变蓝色。鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。

...全文

116 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

yixianggao 2008-01-28

打赏
举报

最终版：点行变色！

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>dhtml.table.changeTrBgColor.html</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." />

</head>

<body>

    <h3>选中行变色！注：IE6ps1, FF2 测试可用！</h3>

    <table width="590" height="61" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td width="280">

            <input type="checkbox" name="cbxGroup" value="checkbox" />

            <label>aaa</label></td>

        <td width="304"> </td>

    </tr>

    <tr>

        <td>

            <input type="checkbox" name="cbxGroup" value="checkbox" />

            <label>bbb</label></td>

        <td> </td>

    </tr>

</table>

</body>

<script type="text/javascript">

<!--



var aCbx = document.getElementsByName("cbxGroup");

var oTr;

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

{

    oTr = aCbx[i].parentNode.parentNode;



    // 鼠标经过表格,表格变红色,鼠标离开,表格白色. 

    oTr.onmouseover = function()

    {

        this.style.backgroundColor = "pink";

    };

    oTr.onmouseout = function()

    {

        this.style.backgroundColor = "white";

    };



    // 鼠标点击表格，复选框选中，表格变蓝色。

    // 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。

    oTr.checkBox = aCbx[i];

    oTr.onclick = function()

    {

        with (this)

        {

            checkBox.checked = !checkBox.checked;



            if (checkBox.checked)

            {

                style.backgroundColor = "yellow";

                fpMouseover = onmouseover;

                onmouseover = null;

                fpMouseout = onmouseout;

                onmouseout = null;                        

            }

            else

            {

                style.backgroundColor = "pink";

                onmouseover = fpMouseover;

                onmouseout = fpMouseout;                        

            }

        }

    };



    aCbx[i].onclick = function()

    {

        this.checked = !this.checked;

    };

}

//-->

</script>

</html>

yixianggao 2008-01-28

打赏
举报

上边那个在FF下with有些问题，
重发一个，现在这个可以兼容FF！

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>dhtml.table.changeTrBgColor.html</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." />

</head>

<body>

    <h3>选中行变色！注：IE6ps1, FF2 测试可用！</h3>

    <table id="tbeTest" width="590" height="61" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td width="280">

            <input type="checkbox" name="cbxGroup" value="checkbox" />

            <label>aaa</label></td>

        <td width="304"> </td>

    </tr>

    <tr>

        <td>

            <input name="cbxGroup" type="checkbox" value="checkbox" />

            <label>bbb</label></td>

        <td> </td>

    </tr>

</table>

</body>

<script type="text/javascript">

<!--



// 鼠标经过表格,表格变红色,鼠标离开,表格白色. 

var oTbe = document.getElementById("tbeTest");

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

{

    oTbe.rows[i].onmouseover = function()

    {

        this.style.backgroundColor = "pink";

    };

    oTbe.rows[i].onmouseout = function()

    {

        this.style.backgroundColor = "white";

    };

}



// 鼠标点击表格，复选框选中，表格变蓝色。

// 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。

var aCbx = document.getElementsByName("cbxGroup");

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

{

    aCbx[i].parentNode.checkBox = aCbx[i];

    aCbx[i].parentNode.onclick = function()

    {

        this.checkBox.checked = !this.checkBox.checked;



        with (this.parentNode)

        {

            if (this.checkBox.checked)

            {

                style.backgroundColor = "yellow";

                fpMouseover = onmouseover;

                onmouseover = null;

                fpMouseout = onmouseout;

                onmouseout = null;                        

            }

            else

            {

                style.backgroundColor = "pink";

                onmouseover = fpMouseover;

                onmouseout = fpMouseout;                        

            }

        }

    };



    aCbx[i].onclick = function()

    {

        this.checked = !this.checked;

    };

}

//-->

</script>

</html>

yixianggao 2008-01-28

打赏
举报

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>dhtml.table.changeTrBgColor.html</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." />

</head>

<body>

    <table id="tbeTest" width="590" height="61" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td width="280">

            <input type="checkbox" name="cbxGroup" value="checkbox" />

            <label>aaa</label></td>

        <td width="304"> </td>

    </tr>

    <tr>

        <td>

            <input name="cbxGroup" type="checkbox" value="checkbox" />

            <label>bbb</label></td>

        <td> </td>

    </tr>

</table>

</body>

<script type="text/javascript">

<!--



// 鼠标经过表格,表格变红色,鼠标离开,表格白色. 

var oTbe = document.getElementById("tbeTest");

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

{

    with (oTbe.rows[i])

    {

        onmouseover = function()

        {

            this.style.backgroundColor = "pink";

        };

        onmouseout = function()

        {

            this.style.backgroundColor = "white";

        };

    }

}



// 鼠标点击表格，复选框选中，表格变蓝色。

// 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。

var aCbx = document.getElementsByName("cbxGroup");

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

{

    with (aCbx[i])

    {

        parentNode.onclick = function()

        {

            this.firstChild.checked = !this.firstChild.checked;



            with (this.parentNode)

            {

                if (this.firstChild.checked)

                {

                    style.backgroundColor = "yellow";

                    fpMouseover = onmouseover;

                    onmouseover = null;

                    fpMouseout = onmouseout;

                    onmouseout = null;                        

                }

                else

                {

                    style.backgroundColor = "pink";

                    onmouseover = fpMouseover;

                    onmouseout = fpMouseout;                        

                }

            }

        };



        onclick = function()

        {

            this.checked = !this.checked;

        };

    }

}

//-->

</script>

</html>

一把编程的菜刀 2008-01-28

打赏
举报

其实tantaiyizu已经给了你完整的结果！

一把编程的菜刀 2008-01-28

打赏
举报

复选框是用name的，你再点击表格的时候已经触发了一个事件，你可以利用事件返回一个选中或不选中状态给复选框

一把编程的菜刀 2008-01-28

打赏
举报

只懂TABLE就不懂变一下用tr

一把编程的菜刀 2008-01-28

打赏
举报

汗！无语！又是一个死学程序的

tantaiyizu 2008-01-27

打赏
举报

...

freecars 2008-01-27

打赏
举报

tantaiyizu ,你好,我觉得用yixianggao的程序可能会好点,这样可以精确到某个表格要实现这样的效果.

tantaiyizu 2008-01-27

打赏
举报

觉得尽量不要给html元素去规定ID和属性，这样可以更好的去实现html和js的分离

不过也可以采用yixianggao的。。。实现就好

freecars 2008-01-27

打赏
举报

yixianggao ,你好,我点击表格时,复选框没选中.一定要点击复选框才行,有什么办法解决?

yixianggao 2008-01-27

打赏
举报

有什么办法专门针对小表格实现效果?
----------------------------
小表格？啥意思？table嵌套么？

给个id多省事儿呀！

tantaiyizu 2008-01-27

打赏
举报

鼠标经过的时候把大表格也变红了.有什么办法专门针对小表格实现效果?

--
那就 $("table tr td:first") 就可以啦

tantaiyizu 2008-01-27

打赏
举报

用了 jquery 一段时间，发现即使写比较大的模块，也不需要定义变量
。。。
不知是好是坏？

yixianggao 2008-01-27

打赏
举报

对了，俺把颜色改成粉黄了，哈

freecars 2008-01-27

打赏
举报

谢谢tantaiyizu ,这样是可以的,但有个问题,象下面的代码.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js"></script>
<script>
//根据你描述的，写了一下，还不知道是否你想要的，不行你自己看着修改下吧。。。
$(document).ready(function(){
//鼠标经过
$("table tr").mouseover(function(){
if($(this).find("input[@type=checkbox][@checked]").length == 0)
{
$(this).css("background-color" ,"red");
}
});
//鼠标离开
$("table tr").mouseout(function(){
if($(this).find("input[@type=checkbox][@checked]").length == 0)
{
$(this).css("background-color" ,"#ffffff");
}
});
//鼠标点击
$("table tr").click(function(){
if($(this).find("input[@type=checkbox][@checked]").length == 0)
{
$(this).css("background-color" ,"#173CCC");
$(this).find("input[@type=checkbox]").attr("checked" ,true);
}
else
{
$(this).css("background-color" ,"red");
$(this).find("input[@type=checkbox]").attr("checked" ,false);
}
});
});

</script>

<body>
<table width="750" height="246" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="590" height="61" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="280"><label>
<input type="checkbox" name="checkbox" value="checkbox" />
aaa</label></td>
<td width="304"> </td>
</tr>
<tr>
<td><input name="checkbox2" type="checkbox" id="checkbox" value="checkbox" />
bbb</td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

鼠标经过的时候把大表格也变红了.有什么办法专门针对小表格实现效果?

yixianggao 2008-01-27

打赏
举报

原来这边还有一个，哈

这个优化了一点儿。

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>dhtml.table.changeTrBgColor.html</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." />

</head>

<body>

    <table id="tbeTest" width="590" height="61" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td width="280">

            <input type="checkbox" name="cbxGroup" id="cbx1" value="checkbox" />

            <label for="cbx1">aaa</label></td>

        <td width="304"> </td>

    </tr>

    <tr>

        <td>

            <input name="cbxGroup" type="checkbox" id="cbx2" value="checkbox" />

            <label for="cbx2">bbb</label></td>

        <td> </td>

    </tr>

</table>

</body>

<script type="text/javascript">

<!--



// 鼠标经过表格,表格变红色,鼠标离开,表格白色. 

var oTbe = document.getElementById("tbeTest");

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

{

    with (oTbe.rows[i])

    {

        onmouseover = function()

        {

            this.style.backgroundColor = "pink";

        };

        onmouseout = function()

        {

            this.style.backgroundColor = "white";

        };

    }

}



// 鼠标点击表格，复选框选中，表格变蓝色。

// 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。

var aCbx = document.getElementsByName("cbxGroup");

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

{

    with (aCbx[i])

    {

        onclick = function()

        {

            with (this.parentNode.parentNode)

            {

                if (this.checked)

                {

                    style.backgroundColor = "yellow";

                    fpMouseover = onmouseover;

                    onmouseover = null;

                    fpMouseout = onmouseout;

                    onmouseout = null;                        

                }

                else

                {

                    style.backgroundColor = "pink";

                    onmouseover = fpMouseover;

                    onmouseout = fpMouseout;                        

                }

            }

        };

    }

}

//-->

</script>

</html>

tantaiyizu 2008-01-27

打赏
举报

直接把上面的代码加到你的网页当中，什么也不用做，然后运行，看下效果就知道了

freecars 2008-01-27

打赏
举报

不行呀.我怎么调试呀?

tantaiyizu 2008-01-27

打赏
举报



<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js"></script>

<script>

//根据你描述的，写了一下 ，还不知道是否你想要的 ，不行你自己看着修改下吧。。。

$(document).ready(function(){

	//鼠标经过

	$("table tr td").mouseover(function(){

		if($(this).find("input[@type=checkbox][@checked]").length == 0)

		{

			$(this).css("background-color" ,"red");

		}

	});

	//鼠标离开

	$("table tr td").mouseout(function(){

		if($(this).find("input[@type=checkbox][@checked]").length == 0)

		{

			$(this).css("background-color" ,"#ffffff");

		}

	});

	//鼠标点击

	$("table tr td").click(function(){

		if($(this).find("input[@type=checkbox][@checked]").length == 0)

		{

			$(this).css("background-color" ,"#173CCC");

			$(this).find("input[@type=checkbox]").attr("checked" ,true);

		}

		else

		{

			$(this).css("background-color" ,"red");

			$(this).find("input[@type=checkbox]").attr("checked" ,false);

		}

	});

});



</script>