#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    14
    Rep Power
    0

    Don't get it :-(


    Hi all,
    What I want to do is to highlight some fields in a table on the same row with two clicks and fill the gap in between.

    Used this code:
    Code:
    <html>
    <head>
    <script>
    
    var tableColumns;
    var tableRows;
    var highlightColor;
    var startid;
    
    
    function initTable ( columns, rows, highlight )
    {
    	tableColumns	= columns;
    	tableRows		= rows;
    	highlightColor	= highlight;
    	var column;
    	var row;
    	startid 		= '-1.-1';
    	
    	document.writeln('<TABLE border="0" cellpadding="0" cellspacing="3" style="border: 1px solid #808080" ><TBODY>');
    		for ( row = 1; row <= rows; row++ )
    		{
    			document.writeln('<TR>');
    		
    			for ( column = 1; column <= columns; column++ )
    			{	
    				document.writeln('<TD id="' + column + '.' + row + '" onclick="submitSelection( this.id );" width="35" height="35" style="border: 1px solid #808080" >&nbsp;</TD>');
    			}
    		document.writeln('</TR>');
    	}
      	document.writeln('<TR><TD id="tableSize" colspan="' + tableColumns + '" align="center" style="border: 1px solid #808080;font-family: Arial, Helvettica; font-size: 10pt;" height="35">0x0</TD></TR></TBODY></TABLE>');
    }
    
    
    function submitSelection ( id )
    {
    	
    	var actualid		= id.split('.');
    	var tempstartid	= startid.split('.');
    	var startcol;
    	var endcol;
    	var column;
    
    	startcol = 0;
    	endcol = 0;
    
    	// 1st click
    	if (startid == '-1.-1')
    	{
    		startid = id;
    		document.getElementById( id ).style.backgroundColor = highlightColor;
    	}
    	else
    	{
    		// same row
    		if (actualid[1] == tempstartid[1])
    		{
    			//startcolum < endcolumn
    			if( tempstartid[0] <= actualid[0] )
    			{
    				startcol = tempstartid[0];
    				endcol = actualid[0];
    			}
    			else
    			{
    				startcol = actualid[0];
    				endcol = tempstartid[0];
    			}
    
    			// fill out 
    			for (column = startcol; column <= endcol; column++)
    			{
    				document.getElementById( column + '.' + actualid[1] ).style.backgroundColor = highlightColor;
    			}
    
    			// reset start
    			startid = '-1.-1';
    
    		}
    	}
    }
    
    
    
    initTable ( 31, 5, '#004080' );
    
    </script>
    
    </head>
    
    <body>
    	
    </body>
    </html>
    What I don't get is why it's not working all the time?? The problem seems to be:
    Code:
    //startcolum < endcolumn
    			if( tempstartid[0] <= actualid[0] )
    			{
    				startcol = tempstartid[0];
    				endcol = actualid[0];
    			}
    			else
    			{
    				startcol = actualid[0];
    				endcol = tempstartid[0];
    			}
    even if tempstartid[0] <= actualid[0] the elsepart is executed ???
    Or is it just on IE9 not working ???
    Any help is highly appreciated!
    TIA
    acki4711
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Atlanta, GA
    Posts
    14
    Rep Power
    0
    IE9 is most likely not the problem; it could be the approach you're taking. Would you mind creating a demo of your code over at jsfiddle.net so that I can better understand what it is you're trying to do?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    14
    Rep Power
    0
    Originally Posted by jonathansampson
    IE9 is most likely not the problem; it could be the approach you're taking. Would you mind creating a demo of your code over at jsfiddle.net so that I can better understand what it is you're trying to do?
    Yep, IE is not the problem.
    What I want to do is in a table with several rows/colums if you click in one column the clicked cell should be highlighted, if you click on another cell in the same column the 2nd clicked cell should be highlighted as well and the gap between 1st and 2nd cell too.
    All works well so far just sometimes (example: click row 1 column 8 and row 1 column 14 the gap is not filled out because the if part:
    Code:
    if( tempstartid[0] <= actualid[0] )
    works ok (tempstartid[0] = 8 and actualid[0] = 14 but the the else part is executed instead of the part when condition is true!?.

    To try out just copy the first codepart, save it in a file and run it on client, click a bit around in the table and you see what I mean.
    Thanks for you time throwing an eye into.
    Appreciat it!
    acki4711
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    18
    Rep Power
    0
    You're comparing strings instead of numbers. As a string '14' is less than '8', because the first character '1' is less than '8'.
    You should convert your string to numbers, where you need to compare numbers.

    Comments on this post

    • Kravvitz agrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    14
    Rep Power
    0
    @Beuge
    Thanks, that whas the overlooked mistake :-(

    Cheers
    acki4711

IMN logo majestic logo threadwatch logo seochat tools logo