Closed Bug 285334 Opened 20 years ago Closed 20 years ago

Table width increases when it is sorted using javascript.

Tracking

()

Status:

RESOLVED WORKSFORME

People

(Reporter: dubra01, Unassigned)

Details

Attachments

(1 file)

The test page 20 years ago Boris Zbarsky [:bzbarsky] 11.05 KB, text/html		Details

rajesh dubey

Reporter

Description

•

20 years ago

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; GIS IE6.0 Build 20031007; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.6) Gecko/20050223 Firefox/1.0.1

The html specified in steps to reproduce contains one header that can be sorted.
On clicking the link the table width increases

Reproducible: Always

Steps to Reproduce:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>

    <style type="text/css">
      body {background: rgb(255,255,255)}
      div.L1875597313 {overflow: hidden;width:376.644pt;}
      div.L1875597313  div,table {
        overflow: hidden;
        margin: 0.000pt 0.000pt 0.000pt 0.000pt;
        border-width: 0.000pt 0.000pt 0.000pt 0.000pt;
        border-style: solid solid solid solid;
        color: rgb(0,0,0);
        background: transparent;
        border-top-color: rgb(0,0,0);
        border-right-color: rgb(0,0,0);
        border-bottom-color: rgb(0,0,0);
        border-left-color: rgb(0,0,0);
        font-family: Times New Roman, sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 10pt;
        line-height: 0.170in;
      }
      div.L1875597313  table {border-collapse:collapse;}
      div.L1875597313 th {text-align:left;vertical-align:top;}
      div.L1875597313 div.C20747952 {z-index: 3; width: 100.500pt; height: 
11.640pt; font-weight: bold; line-height:0.168in;}
      div.L1875597313 div.C20950808 {z-index: 0; width: 468.000pt; height: 
216.000pt;}
      div.L1875597313 div.C217604240 {z-index: 3; width: 100.500pt; height: 
11.760pt;}
      div.L1875597313 div.C217843256 {z-index: 3; width: 86.400pt; height: 
11.760pt;}
      div.L1875597313 div.C218800536 {z-index: 3; width: 86.400pt; height: 
11.640pt; font-weight: bold; line-height:0.168in;}
      div.L1875597313 table.C222365944 {z-index: 1; margin-left: 1.000pt; 
margin-top: 1.000pt; border-width: 0.720pt 0.720pt 0.720pt 0.720pt;}
      div.L1875597313 table.C222365944 td{vertical-align:top;border-right:1pt 
solid black;border-top:1pt solid black;border-bottom:1pt solid black;}
      div.L1875597313 table.C222365944 .C222365944R{border-right:0pt;}
      div.L1875597313 table.C222365944 th{border-right:1pt solid black;}
      div.L1875597313 div.C222908456 {z-index: 3; width: 162.752pt; height: 
11.760pt;}
      div.L1875597313 div.C223192680 {z-index: 3; width: 162.752pt; height: 
11.640pt; font-weight: bold; line-height:0.168in;}
      div.L1875597313 div.C224727520 {z-index: 2; width: 374.148pt; height: 
11.760pt; font-weight: bold; line-height:0.168in;}
      div.L1875597313 div.C225002536 {z-index: 2; width: 374.148pt; height: 
11.760pt;}
      div.L1875597313 div.L224073640 {margin-bottom:0.120pt;}
      div.L1875597313 div.L224939080 {margin-left:6.000pt;}
      div.L1875597313 div.L224939152 {margin-left:3.248pt;}

    </style>

    <script language="JavaScript" type="text/javascript">
	function sorttable
(evt,sortclass,datatype,imagenosort,imagesortasc,imagesortdsc,tau){
	    var linkelem = (evt.target) ? evt.target : ((evt.srcElement) ? 
        	      evt.srcElement : null);
		var asc;
	    if(linkelem == null){
        	alert("Unable to find Event Target for sorting");
	        return;
	    }

	    if(linkelem.asc == undefined){
		linkelem.asc = 0;
		asc = 1;
	    }
	    else{
		asc = linkelem.asc;
		if(linkelem.asc == 1){
			linkelem.asc = 0;
		}
		else{
			linkelem.asc = 1;
		}
	    }
    var table =  getParentTag(linkelem,"table");
    if(table == null){
        alert("Unable to find the containing table");
        return;
    }
    var header = getParentTag(linkelem,"th");
    if(header == null){
        alert("unable to find the containing header");
        return;
    }
    var columnIndex = header.cellIndex;
	var length = table.tBodies[0].rows.length;
    var sorttableArray = null;
    var summaryrow = null;
    if(table.tBodies[0].rows[length -1].className == "CPRSUMM"){
        sorttableArray = new Array(length-1);
        summaryrow = table.tBodies[0].rows[length -1];
    }
    else{
        sorttableArray = new Array(length);
    }
	var iIndex = 0;
	for(iIndex = 0; iIndex < length; iIndex++){
		var row = table.tBodies[0].rows[iIndex];
        if(row.className != "CPRSUMM"){
    		var col = row.cells[columnIndex];
	    	var divToCompare = findDivToCompare(col,sortclass);
		    if(divToCompare == null){
			    alert("node with class "+sortclass+" not found in 
row "+iIndex);
    		}
	    	var rowdata = new Object;
		    rowdata.dataCompare = divToCompare.innerHTML;
            rowdata.asc = asc;
	    	rowdata.row = table.tBodies[0].rows[iIndex]; 		
            rowdata.datatype = datatype;
		    sorttableArray[iIndex] = rowdata;
        }
        else{
            summaryrow = row;
        }
	}
	sorttableArray.sort(sortColumn);
    var FlipTauColor = 0;
    length = sorttableArray.length;
	for(iIndex = 0; iIndex < length; iIndex++){
		table.tBodies[0].appendChild(sorttableArray[iIndex].row);
        var classnm = sorttableArray[iIndex].row.className;
        if(tau == true){
            var datacolor = false;
            if(classnm.indexOf("CPRTAU") == -1){
                datacolor = true;
            }
            if(FlipTauColor == 0){
                FlipTauColor = 1;
                if(datacolor != true){
                    sorttableArray[iIndex].row.className = "CPRTAUROW0";
                }
            }
            else{
                FlipTauColor = 0;
                if(datacolor != true){
                    sorttableArray[iIndex].row.className = "CPRTAUROW1";
                }
            }
        } 
	}
    if(summaryrow != null){
		table.tBodies[0].appendChild(summaryrow);
    }
    
   var imgselected = null;
    if(asc == 1){
        imgselected = getSiblingTag(linkelem,"img","CPRSORTIMG");
        imgselected.setAttribute("src",imagesortasc);
    }
    else{
      imgselected = getSiblingTag(linkelem,"img","CPRSORTIMG");
       imgselected.setAttribute("src",imagesortdsc);
    }

    if(table.lastactiveimg == undefined){
        table.lastactiveimg = imgselected;
    }
    else{
        if(table.lastactiveimg != imgselected){
            table.lastactiveimg.setAttribute("src",imagenosort);
            table.lastactiveimg = imgselected;
        }
    }
}

function findDivToCompare(container,sortclass){
	var length = container.childNodes.length;
	var iIndex = 0;
	/* In the first pass go thru all div at this level */
	for(iIndex = 0; iIndex < length; iIndex++){
		var childNode = container.childNodes[iIndex];
		if(childNode.nodeType == 1){

			if((childNode.nodeName == "div") ||
			   (childNode.nodeName == "DIV")){
				if(childNode.className == sortclass){
 					return childNode;
				}
			}
		}
	}
	/* In the this pass go thru child div  */
	for(iIndex = 0; iIndex < length; iIndex++){
		var childNode = container.childNodes[iIndex];
		if(childNode.nodeType == 1){
			if((childNode.nodeName == "div") ||
			   (childNode.nodeName == "DIV")){
				var nodeval = findDivToCompare
(childNode,sortclass);
				if(nodeval != null){
					return nodeval;
				}
			}
		}
	}
	return null;
}

function getParentTag(nodetest,parenttag){
    var nodeparent = nodetest.parentNode;
    if(nodeparent == null){
        return null;
    }
    var parentnodeName = nodeparent.nodeName;
    parentnodeName = parentnodeName.toLowerCase();
    if(parentnodeName == parenttag){
        return nodeparent;
    }
    else{
        return getParentTag(nodeparent,parenttag);
    }
}

function getSiblingTag(nodetest,siblingtagtofind,classidtest){
    var nextsiblingnd = nodetest.nextSibling;
    while(nextsiblingnd != null){
        var siblingndname = nextsiblingnd.nodeName;
        siblingndname = siblingndname.toLowerCase();
        if(siblingndname == siblingtagtofind){
            if(classidtest != null){
                if(classidtest == nextsiblingnd.className){
                    return nextsiblingnd;
                }
            }
            else{
                return nextsiblingnd;
            }
        }
        nextsiblingnd = nextsiblingnd.nextSibling;
        
    }

    var previoussiblingnd = nodetest.previousSibling;
    while(previoussiblingnd != null){
        var siblingndname = previoussiblingnd.nodeName;
        siblingndname = siblingndname.toLowerCase();
        if(siblingndname == siblingtagtofind){
            if(classidtest != null){
                if(classidtest == previoussiblingnd.className){
                    return previoussiblingnd;
                }
            }
            else{
                return previoussiblingnd;
            }
        }
        previoussiblingnd = previoussiblingnd.previousSibling;
    }
    return null;
}

function sortColumn(row1,row2){
        var tmp1 = null;
        var tmp2 = null;
        if((row1.datatype == "number") || (row1.datatype == "date")){
    	    tmp1 = parseFloat(row1.dataCompare);
       		tmp2 = parseFloat(row2.dataCompare);
            if((isNaN(tmp1) == true) ||
               (isNaN(tmp2) == true)){
                tmp1 = row1.dataCompare;
                tmp2 = row2.dataCompare;
            }
        }
        else{
		    tmp1 = row1.dataCompare.toLowerCase();
    		tmp2 = row2.dataCompare.toLowerCase();
        }

		if(row1.asc == 1){
    		if(tmp1 < tmp2){
	    		return -1;
		    }
    		else if( tmp1 > tmp2){
	    		return 1;
		    }
    		else{
	    		return 0;
		    }
		}
		else{
    		if(tmp1 < tmp2){
	    		return 1;
		    }
    		else if( tmp1 > tmp2){
	    		return -1;
		    }
    		else{
	    		return 0;
		    }
		}
		
		 
}

</script>
  </head>
  <body>
    <div class="L1875597313">
    <div>
    <table  class="C222365944" cellspacing="0" cellpadding="0">
    <col style="width:95.400pt;" />
    <col style="width:169.000pt;" />
    <col style="width:111.244pt;" />
    <thead>
    <tr>
    <th>
    <div class="L224073640">
    <div class="L224939080">
    <div class="C218800536" style="  height: 12.088pt;">
    <a href="#" onclick="javascript:sorttable
(event,'C217843256','string','nosort.png','sort_ascending.png','sort_decending.p
ng',false)">Course Code</a> 
    </div>
    </div>
    </div>
    </th>
    <th>
    <div class="L224073640">
    <div class="L224939152">
    <div class="C223192680" style=" height: 12.088pt;"> ISBN </div>
    </div>
    </div>
    </th>
    <th class="C222365944R">
    <div class="L224073640">
    <div class="L224939152">
    <div class="C20747952" style=" height: 12.088pt;"> Publisher </div>
    </div>
    </div>
    </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    <div class="L224939080">
    <div class="C217843256" style=" height: 12.204pt;"> ART 1200 </div>
    </div>
    </td>
    <td>
    <div class="L224939152">
    <div class="C222908456" style=" height: 12.204pt;"> 0-689-52315-7 </div>
    </div>
    </td>
    <td class="C222365944R">
    <div class="L224939152">
    <div class="C217604240" style=" height: 12.204pt;"> Burroughs </div>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <div class="L224939080">
    <div class="C217843256" style=" height: 12.204pt;"> ART 1300 </div>
    </div>
    </td>
    <td>
    <div class="L224939152">
    <div class="C222908456" style=" height: 12.204pt;"> 0-985-95137-9 </div>
    </div>
    </td>
    <td class="C222365944R">
    <div class="L224939152">
    <div class="C217604240" style=" height: 12.204pt;"> Averies </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
  </body>
</html>

Boris Zbarsky [:bzbarsky]

Comment 1

•

20 years ago

Attached file The test page — Details

Please attach HTML as attachments instead of pasting it in?

Boris Zbarsky [:bzbarsky]

Comment 2

•

20 years ago

Worksforme in a current trunk build (and that makes sense, since several
problems like this got fixed since 1.7).

Status: UNCONFIRMED → RESOLVED

Closed: 20 years ago

Resolution: --- → WORKSFORME

You need to log in before you can comment on or make changes to this bug.

Bugzilla

Quick Search

Table width increases when it is sorted using javascript.

Categories

(Core :: Layout: Tables, defect)

Tracking

()

People

(Reporter: dubra01, Unassigned)

References

Details

Crash Data

Security

(public)

User Story

Attachments

(1 file)

Description

Comment 1

Comment 2

Attachment

General

Description

File Name

Content Type