求指点迷津~~标题要短~要短~要短~要短~要短~……

----大漠---- 2011-08-10 10:18:58

两个问题。
1.框架网页，中间有个图片按钮，双击可以把左侧的框隐藏，再双击展开。用js实现。
如图：
http://hi.csdn.net/attachment/201108/10/10119156_1312941661A8G8.jpg
http://hi.csdn.net/attachment/201108/10/10119156_13129416593w33.jpg
2.表格中的内容，第一行（标题行）的复选框被选中后，整个表格的内容会自动被选中，背景色改变。
除第一行（标题行）之外，其他行的复选框被选中后，只改变当前行的背景色。用js实现。
如图：
http://hi.csdn.net/attachment/201108/10/10119156_13129416589YdE.jpg
http://hi.csdn.net/attachment/201108/10/10119156_13129416539AU9.jpg

请高人给出思路，不要直接给答案啊，咬过的馍不香，谢谢！
（另，第一次传图，如果看不到的话在我的相册里）

...全文

120 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

----大漠---- 2011-08-12

打赏
举报

MuBeiBei 2011-08-10

打赏
举报

<script type="text/javascript">

	//拿到所有input标签

    var cb = document.getElementsByTagName('input'),

    len = cb.length;

    

    for(var i = 0; i < len; i++){

		//判断input是否是checkbox

        if(cb[i].type == 'checkbox'){

			//把当前的保存给变量c

            var c = cb[i];

            !function(c){

				//当前checkbox点击事件

                c.onclick = function(){

					//找到对应的tr标签

                    var tr = c.parentNode.parentNode;

                    if(c.checked){

						//如果选中tr背景变色

                        tr.style.background = '#333';

                    }else{

						//如果没选中tr背景变成空白

                        tr.style.background = '';    

                    }

                };

            }(c)

        }    

    }

    

	//全选checkbox按钮事件

    document.getElementById('all').onclick = function(){

		//拿到所有tr标签

        var trs = document.getElementsByTagName('tr'),len = trs.length;

		//如果选中全选按钮

        if(this.checked){

			//循环tr标签，除了第一个全选按钮的tr不变色，其他都变色，并且每行的checkbox选中

            for(var i = 1; i < len; i++){

                trs[i].getElementsByTagName('input')[0].checked = 'checked';

                trs[i].style.background = '#333';    

            }

        }else{

			//如果没选中

			//循环tr标签，变成没有背景色，并且每行的checkbox不选中

            for(var i = 1; i < len; i++){

                trs[i].getElementsByTagName('input')[0].checked = '';

                trs[i].style.background = '';    

            }    

        }

    };

</script>

----大漠---- 2011-08-10

打赏
举报

[Quote=引用 3 楼 mubeibei 的回复:]
HTML code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table>
<tr>
<td><input id="all" type="checkbox" />全选</td>
<……
[/Quote]
北北，你真牛，谢谢你！
但是函数我还没入门，能详解一下么？

加个注释什么的，太感谢你了~~~

kyzy_yy_pm 2011-08-10

打赏
举报

第一个问题：
ondblclick(双击事件)发生在指定元素的时候你只需要用js设置下面的红字部分的属性即可（下面只用作说明）

<frameset rows="40, *">
<frame id="top" name="top" src="top.html">
<frameset cols="100, *">
<frame id="left" name="left" src="left.html">
<frame id="right" name="right" src="right.html">
</frameset>
</frameset>

第二个问题，当选中当前行时候，你只需要用js将当前tr的background设置一下就好了，也就是当checkbox的onclick被触发的时候你判断下当前的checkbox是ckecked或没checked，以此来设置背景颜色

fengyun817 2011-08-10

打赏
举报

思路：
第一个问题：框架分左中右三部分，中间为有图片的框架，里面写js控制左侧隐藏显示。同时改变图片的指向（两张图片向左向右）
第二个问题：选中时不加样式，直接在mouseover时加样式，mouseout 时移除样式即可。如果非要选中则可以只给有焦点的加样式，其它的即使选中也不加样式（背景色）

MuBeiBei 2011-08-10

打赏
举报

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<table>

	<tr>

    	<td><input id="all" type="checkbox" />全选</td>

        <td colspan="3"></td>

    </tr>

	<tr>

    	<td><input type="checkbox" /></td>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

    	<td><input type="checkbox" /></td>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

    	<td><input type="checkbox" /></td>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

    	<td><input type="checkbox" /></td>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

</table>

<script type="text/javascript">

	var cb = document.getElementsByTagName('input'),

	len = cb.length;

	

	for(var i = 0; i < len; i++){

		if(cb[i].type == 'checkbox'){

			var c = cb[i];

			!function(c){

				c.onclick = function(){

					var tr = c.parentNode.parentNode;

					if(c.checked){

						tr.style.background = '#333';

					}else{

						tr.style.background = '';	

					}

				};

			}(c)

		}	

	}

	

	document.getElementById('all').onclick = function(){

		var trs = document.getElementsByTagName('tr'),len = trs.length;

		if(this.checked){

			for(var i = 1; i < len; i++){

				trs[i].getElementsByTagName('input')[0].checked = 'checked';

				trs[i].style.background = '#333';	

			}

		}else{

			for(var i = 1; i < len; i++){

				trs[i].getElementsByTagName('input')[0].checked = '';

				trs[i].style.background = '';	

			}	

		}

	};

</script>

</body>

</html>