Formating Problem in Firefox when Hiding columns in table

Discussion in 'JavaScript' started by danielc1998, Nov 8, 2010.

0
  1. #1
    I have this code to show/hide rows and columns in a table built dinamically.
    It works perfectly well in IE, the columns and rows are hidden and the table keeps its form, I mean each cell appears where it shoud be. However in firefox looks like a mess.
    I would appreciatte some help. Thanks.

    <HTML>
    <HEAD>
    <script language=javascript>

    //------------------------------------------------
    // FULL TABLE
    //------------------------------------------------

    function MakeTable(Prefix){



    var nrLevels=5

    // set current nr of code levels
    var idsel=document.getElementById("selLevels")
    idsel.selectedIndex=(nrLevels-1)

    var key
    // first level
    var mystr="1 lev1|"
    var aData= mystr.split("|")
    var str=""
    for(var i=0;i<aData.length-1;i++){
    key=aData.slice(0,aData.indexOf(" "))
    KEY1=key
    str+=Node(aData,KEY1,"level1")

    // second level
    if(nrLevels>1){
    var mystr2="2 lev2|2b lev2b|"
    var aData2= mystr2.split("|")
    for(var j=0;j<aData2.length-1;j++){
    key2=aData2[j].slice(0,aData2[j].indexOf(" "))
    KEY2=key+"."+key2
    str+=Node(aData2[j],KEY2,"level2")

    // third level
    if(nrLevels>2){
    var mystr3="3 lev3|3b lev3b|"
    var aData3= mystr3.split("|")
    for(var z=0;z<aData3.length-1;z++){
    key3=aData3[z].slice(0,aData3[z].indexOf(" "))
    KEY3=key+"."+key2+"."+key3
    str+=Node(aData3[z],KEY3,"level3")

    // fourth level
    if(nrLevels>3){
    var mystr4="4 lev4|"
    var aData4= mystr4.split("|")
    for(var x=0;x<aData4.length-1;x++){
    key4=aData4[x].slice(0,aData4[x].indexOf(" "))
    KEY4=key+"."+key2+"."+key3+"."+key4
    str+=Node(aData4[x],KEY4,"level4")

    // fifth level
    if(nrLevels>4){
    var mystr5="5 lev5|"
    var aData5= mystr5.split("|")
    for(var y=0;y<aData5.length-1;y++){
    key5=aData5[y].slice(0,aData5[y].indexOf(" "))
    KEY5=key+"."+key2+"."+key3+"."+key4+"."+key5
    str+=Node(aData5[x],KEY5,"level5")
    }
    } // end fifth level

    }
    } // end fourth level

    }
    } // end third level
    }
    } // end second level
    }

    // containers
    var tblIni="<table id=tblCodeSubs border=1>"
    var tblEnd="</table>"

    // header
    var tblHead="<tr>"
    tblHead+="<td width=150><label>Key</label></td>"
    tblHead+="<td width=150><label>Name</label></td>"
    tblHead+="<td width=150><label>Default</label></td>"

    var olist=document.frm.selItemSelected
    for(var j=0;j<olist.length;j++){
    name=olist.options[j].text
    tblHead+="<td width=180 id='"+name+"'><label>"+name+"</label></td>"
    }
    tblHead+="</tr>"

    // insert table
    var elId=document.getElementById("divtbl")
    elId.innerHTML=tblIni + tblHead + str + tblEnd
    }

    function Node(text,key,level){

    var str=""
    str+="<tr id='"+level+"'>"
    str+="<td width=150 id=''><label>"+key+"</label></td>"
    str+="<td width=150 id=''><label>"+text+"</label></td>"
    str+="<td width=150 id=''><input id='txtEmi"+key+"' type=text value='' style='width:40px'></td>"

    // subtances
    var olist=document.frm.selItemSelected
    for(var j=0;j<olist.length;j++){
    name=olist.options[j].text
    str+="<td width=180 id='"+name+"'><input id=txt'"+name+"' type=text value=''></td>"
    }

    str+="</tr>"
    return str
    }

    //------------------------------------------------
    // SHOW BUTTON FUNCTIONS
    //------------------------------------------------


    function ShowRows(){
    ShowHideRows()
    ShowHideCols()
    }

    function ShowHideCols(){
    var tbl=document.getElementById("tblCodeSubs")
    var rows=tbl.getElementsByTagName("tr")

    // hide/show cols according to substances selected
    for(var row=0;row<rows.length;row++){
    var cels=rows[row].getElementsByTagName("td")

    var olist=document.frm.selItemSelected
    for(var j=0;j<olist.length;j++){
    if(olist.options[j].selected==true)
    cels[olist.options[j].text].style.display="block"
    else
    cels[olist.options[j].text].style.display="none"
    }
    }
    }

    function ShowHideRows(){
    // hide/show rows according to level selected

    var tbl=document.getElementById("tblCodeSubs")
    var rows=tbl.getElementsByTagName("tr")

    var idsel=document.getElementById("selLevels")
    var nrLevel=idsel.options[idsel.selectedIndex].text

    for(var row=0;row<rows.length;row++){

    // get level number for row
    n=tbl.rows[row].id.slice(-1)

    if(n<=nrLevel)
    tbl.rows[row].style.display="block"
    else
    tbl.rows[row].style.display="none"

    }
    }



    </script>

    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    </HEAD>
    <BODY onload=MakeTable("geo")>
    <FORM ID="frm" NAME="frm">

    <fieldset style='width:80%'>
    <TABLE width=100%>
    <TR>
    <TD>
    <SELECT id=selItemSelected size=2 style="HEIGHT: 70px; WIDTH:180" multiple>
    <option>sust1</option>
    <option>sust2</option>
    <option>sust3</option>
    <option>sust4</option>
    </SELECT>
    </TD>
    <TD>levels shown
    <SELECT id=selLevels size=1 style="WIDTH:40">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </SELECT>
    </TD>
    <TD>
    <INPUT id=btnMakeTable type=button value="Show" onclick=ShowRows()>
    </TD>
    </TR>
    </TABLE>
    </fieldset>

    <div id=divtbl>
    </div>


    </FORM>
    </BODY>
    </HTML>
     
    danielc1998, Nov 8, 2010 IP
  2. shofstetter

    shofstetter Well-Known Member

    Messages:
    178
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    120
    #2
    try changing in your code .style.display="block" to .style.display=''; that way each browser will use it's default; I use a similar script for a menu:

    
<script type="text/javascript">
<!--
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "none" ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}
//-->
</script>
    Code (markup):
    works in many browsers including firefox and ie. in firefox display:none will cause the table cell to collapse. your may have to do something different if you do not want it to collapse.
     
    shofstetter, Nov 20, 2010 IP