写了段javascript代码，结果发现有兼容性问题，请求高手指正。

hairui 2011-12-19 03:34:27

写了段js代码，完整的Htm如下：



<html>

<head>

<script language="JavaScript">

function ParentTRClicked2(){

	var dgtr = document.getElementsByName('DG');

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

	if(dgtr[i].style.display=='none'){

		dgtr[i].style.display='table-row';

	}

	else{ 

		dgtr[i].style.display='none';

	}

	}



}

</script>

</head>



<body>

<table border="1px">

<tr><th>测试栏</th><tr>

<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>

<tr name="DG"><td>子行</td></tr>

<tr name="DG"><td>子行</td></tr>



</table>

</body>

</html>

我的意图是通过点击“父行”来隐藏和显示两个“子行”
在Chrome和Firefox中能够看到预想中效果，但在IE中没有反应，估计是兼容性问题
但由于刚开始接触javascript，找不到症结所在，特此发帖请求高手解决。

...全文

88 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

异域风景 2011-12-19

打赏
举报

document.getElementsByName('DG')这句不兼容
document.getElementsByTagName("table")[0]
同样的办法获取........（"tr"）
然后用tr.getAttribute("name")=="DG"得到

朱孔义 2011-12-19

打赏
举报

我在VS里监视了一下， document.getElementsByName('DG')这一条语句取不到对象
而且复制上去的时候，会提示name不是tr的有效属性
你要实现这个功能的话，你可以将你的两个子行另写成一个Table，然后点击父行隐藏Table
这样好实现一些吧，还有要是用jquery来实现的话那就简单了，非常容易取到对象

三石-gary 2011-12-19

打赏
举报

用JQUERY比较好。。

峭沙 2011-12-19

打赏
举报

firefox不支持tr.name，修改下

function ParentTRClicked2(){

	var table = document.getElementsByTagName('table')[0],

		trs = table.getElementsByTagName('tr'),

		dgtr = [];

	for(var i = 0, len = trs.length; i < len; i++){

		var tr = trs[i];

		if(tr.getAttribute('name') === 'DG'){

			dgtr.push(tr);

		}

	}

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

    if(dgtr[i].style.display=='none'){

        dgtr[i].style.display='table-row';

    }

    else{ 

        dgtr[i].style.display='none';

    }

    }

}

p2227 2011-12-19

打赏
举报

<html>

<head>

<script>

function ParentTRClicked2(){

	var dgtr = [];

	if(document.all){

		for (var j=0;j<document.all.length;j++ )

		{

			if(document.all[j].getAttribute("name") == 'DG')

			dgtr.push(document.all[j])

		}

	}else{

		dgtr = document.getElementsByName('DG')

	}

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

		dgtr[i].style.display= (dgtr[i].style.display == 'none' ? 'table-row' : 'none')

	}



}

</script>

</head>



<body>

<table border="1px">

<tr><th>测试栏</th><tr>

<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>

<tr name="DG"><td>子行</td></tr>

<tr name="DG"><td>子行</td></tr>



</table>

</body>

</html>

w290601645 2011-12-19

打赏
举报

是<tr name="DG"> 的问题 JQ兼容性不错



<html>

<head>

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function ParentTRClicked2() {

        var dgtr = $(".cRow");

        //var dgtr = document.getElementsByName("DG");        

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

            if (dgtr[i].style.display == 'none') {

                dgtr[i].style.display = 'block';

            }

            else {

                dgtr[i].style.display = 'none';

            }

        }

    }

</script>

</head>



<body>

<table border="1px">

<tr><th>测试栏</th></tr>

<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>

<tr name="DG" class="cRow"><td>子行</td></tr>

<tr name="DG" class="cRow"><td>子行</td></tr>



</table>

</body>

</html>

峭沙 2011-12-19

打赏
举报

IE的getElementsByName只会查找表单元素

function ParentTRClicked2(){

	var table = document.getElementsByTagName('table')[0],

		trs = table.getElementsByTagName('tr'),

		dgtr = [];

	for(var i = 0, len = trs.length; i < len; i++){

		var tr = trs[i];

		if(tr.name === 'DG'){

			dgtr.push(tr);

		}

	}

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

    if(dgtr[i].style.display=='none'){

        dgtr[i].style.display='table-row';

    }

    else{ 

        dgtr[i].style.display='none';

    }

    }

}