写了段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,找不到症结所在,特此发帖请求高手解决。

解决方案 »

  1.   

    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';
        }
        }
    }
      

  2.   

    是<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>
      

  3.   

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

  4.   

    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';
        }
        }
    }
      

  5.   

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

  6.   

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