当前位置:编程学习 > JAVA >>

在线求助怎么解决这个浏览器不兼容问题


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>一级菜单1</title>
<script>
function selectCheck(){

}
//选中孩子
function selectChild(o){
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得子菜单的tr
var otrmenu = otr.nextSibling;
//遍历子菜单的checkbox
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = o.checked;
}
}


}

//选中父类(适用二级)
function selectParent(o){
//t=true默认找到
var t= false;
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得父菜单的tr
var otrmenu = otr.previousSibling;
//遍历子菜单的checkbox,验证是有选
for(var i=0;i<otr.all.length;i++) {
if(otr.all[i].type=="checkbox" && otr.all[i].checked){
t = true;
break;
}
}
//设置父类的checkbox状态
if(t){
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "checked";
selectRoot(otrmenu.all[i]);
break;
}
}
}else{
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "";
selectRoot(otrmenu.all[i]);
break;
}
}
}

}


//选中根点节(适用一级)
function selectRoot(o){
//t=true默认找到
var t= false;
//获得本菜单的tr
var otr = o.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement

//获得父菜单的tr
var otrmenu = otr.previousSibling;

//遍历子菜单的checkbox,验证是否全选
for(var i=0;i<otr.all.length;i++) {
if(otr.all[i].type=="checkbox" && otr.all[i].checked){
t = true;
break;
}
}
//设置父类的checkbox状态
if(t){
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "checked";
break;
}
}
}else{
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "";
break;
}
}
}

}
//菜单的显示与隐藏
function setDisplay(o){
if(o.style.display==""){
o.style.display="none";
}else{
o.style.display="";
}
}

</script>
</head>

<body>
<table>
<tr>
<td ><input type="checkbox" name="m1" onclick="selectChild(this);" ><span onclick="setDisplay(m1_menu);" style="cursor: hand">一级菜单1</span></td>
</tr>
<tr id="m1_menu" style="">
<td>
<table>
<tr>
<td>  <input type="checkbox" name="m11" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m11_menu);" style="cursor: hand">二级菜单1</span></td>
</tr>
<tr id="m11_menu">
<td>
    <input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单1</a><br>
    <input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单2</a><br>
    <input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单3</a><br>
</td>
</tr>
<tr>
<td>  <input type="checkbox" name="m12" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m12_menu);" style="cursor: hand">二级菜单2</span></td>
</tr>
<tr id="m12_menu">
<td>
    <input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单4</a><br>
    <input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单5</a><br>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td><input type="checkbox" name="m2">一级菜单2</td>
</tr>
<tr id="m2_menu">
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="m3">一级菜单3</td>
</tr>
<tr id="m3_menu">
<td></td>
</tr>
</table></body>

</html>



在IE上可以实现checkbox选中不选中操作,但是在chrome中就不行,firefox也不行,求大神,在线等,我对javascript不是很了解 --------------------编程问答-------------------- 自己顶一下吧,明天看看 --------------------编程问答-------------------- --------------------编程问答-------------------- 0.0没人 --------------------编程问答-------------------- 1、parentElement 是IE的,firefox的是parentNode
2、previousSibling是IE的,firefox的是previousElementSibling
3、nextSibling是IE的,firefox的是nextElementSibling

可以看下这个帖子的说明
http://frieboy168.blog.163.com/blog/static/3554449120113145174866/
http://blog.csdn.net/zhouyong0/article/details/6371253

里面介绍了一些标准的写法,你可以根据这个修改下你的这个代码(我试过了,貌似不兼容,也没有太多时间去尝试)
JS里面你可以这样写  var otrmenu = otr.nextSibling || otr.nextElementSibling;
这个可以参考下面的帖子看看
http://www.jb51.net/article/4338.htm



最好的办法是用jquery等的去重构一下你的这个,那样的话兼容性就不用你去关注了。
--------------------编程问答--------------------

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.js"></script>
<title>一级菜单1</title>
<script>
        function selectCheck(){
            
        }
        //选中孩子
        function selectChild(o){
            //获得本菜单的tr
            var otr = o.parentElement.parentElement;

            //获得子菜单的tr
            var checkboxArray = $(otr).next().find("input:checkbox");

            //遍历子菜单的checkbox
            for(var i=0;i<checkboxArray.length;i++)    {
               checkboxArray[i].checked = o.checked;
            }        


        }    
        
        //选中父类(适用二级)
        function selectParent(o){
            //t=true默认找到
            var t= false;
            //获得本菜单的tr
            var otr = o.parentElement.parentElement;
            //获得父菜单的tr
            var otrmenu = otr.previousSibling;
            //遍历子菜单的checkbox,验证是有选
            for(var i=0;i<otr.all.length;i++)    {
                if(otr.all[i].type=="checkbox" && otr.all[i].checked){
                    t = true;
                    break;
                }
            }        
            //设置父类的checkbox状态
            if(t){
                for(var i=0;i<otrmenu.all.length;i++)    {
                if(otrmenu.all[i].type=="checkbox"){
                    otrmenu.all[i].checked = "checked";                
                    selectRoot(otrmenu.all[i]);    
                    break;
                    }
                }
            }else{
                for(var i=0;i<otrmenu.all.length;i++)    {
                if(otrmenu.all[i].type=="checkbox"){
                    otrmenu.all[i].checked = "";
                    selectRoot(otrmenu.all[i]);    
                    break;
                    }
                }
            }        
            
        }
        
        
        //选中根点节(适用一级)
        function selectRoot(o){
            //t=true默认找到
            var t= false;
            //获得本菜单的tr
            var otr = o.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement

            //获得父菜单的tr
            var otrmenu = otr.previousSibling;

            //遍历子菜单的checkbox,验证是否全选
            for(var i=0;i<otr.all.length;i++)    {
                if(otr.all[i].type=="checkbox" && otr.all[i].checked){
                    t = true;
                    break;
                }
            }        
                //设置父类的checkbox状态
            if(t){
                for(var i=0;i<otrmenu.all.length;i++)    {
                if(otrmenu.all[i].type=="checkbox"){
                    otrmenu.all[i].checked = "checked";                
                    break;
                    }
                }
            }else{
                for(var i=0;i<otrmenu.all.length;i++)    {
                if(otrmenu.all[i].type=="checkbox"){
                    otrmenu.all[i].checked = "";
                    break;
                    }
                }
            }        
            
        }
        //菜单的显示与隐藏
        function setDisplay(o){
            if(o.style.display==""){
                o.style.display="none";
            }else{
                o.style.display="";
            }
        }
        
    </script>
</head>

<body>
    <table>
        <tr>
            <td ><input type="checkbox" name="m1" onclick="selectChild(this);" ><span onclick="setDisplay(m1_menu);" style="cursor: hand">一级菜单1</span></td>
        </tr>
        <tr id="m1_menu" style="">
            <td>
                <table>
                    <tr>
                        <td>  <input type="checkbox" name="m11" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m11_menu);" style="cursor: hand">二级菜单1</span></td>
                    </tr>
                    <tr id="m11_menu">
                        <td>
                                <input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单1</a><br>
                                <input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单2</a><br>
                                <input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单3</a><br>
                        </td>
                    </tr>            
                    <tr>
                        <td>  <input type="checkbox" name="m12" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m12_menu);" style="cursor: hand">二级菜单2</span></td>
                    </tr>
                    <tr id="m12_menu">
                        <td>
                                <input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单4</a><br>
                                <input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单5</a><br>                            
                        </td>
                    </tr>                                                
                </table>
            
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" name="m2">一级菜单2</td>
        </tr>
        <tr id="m2_menu">
            <td></td>
        </tr>        
        <tr>
            <td><input type="checkbox" name="m3">一级菜单3</td>
        </tr>
        <tr id="m3_menu">
            <td></td>
        </tr>            
    </table></body>

</html>




用jquery可以解决这种问题  我只改了第一个方法,若想用,后面自己改撒。。都差不多

//选中孩子
        function selectChild(o){
            //获得本菜单的tr
            var otr = o.parentElement.parentElement;

            //获得子菜单的tr
            var checkboxArray = $(otr).next().find("input:checkbox");

            //遍历子菜单的checkbox
            for(var i=0;i<checkboxArray.length;i++)    {
               checkboxArray[i].checked = o.checked;
            }        


        }    
补充:Java ,  Java EE
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,