Don't get it :-(

Dev Shed Forums Sponsor:

December 7th, 2012, 05:22 AM

acki4711

Registered User

Join Date: Dec 2012

Posts: 7

Time spent in forums: 3 h 16 m 32 sec
Reputation 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

December 7th, 2012, 10:41 AM

jonathansampson

Registered User

Join Date: Dec 2012

Location: Atlanta, GA

Posts: 14

Time spent in forums: 3 h 22 m 47 sec
Reputation 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?

December 8th, 2012, 04:15 AM

acki4711

Registered User

Join Date: Dec 2012

Posts: 7

Time spent in forums: 3 h 16 m 32 sec
Reputation Power: 0

Quote:

Originally Posted by jonathansampson

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

December 8th, 2012, 02:33 PM

Beuge

Registered User

Join Date: Mar 2011

Posts: 15

Time spent in forums: 1 Day 5 h 36 m 57 sec
Reputation 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!

December 10th, 2012, 10:50 PM

acki4711

Registered User

Join Date: Dec 2012

Posts: 7

Time spent in forums: 3 h 16 m 32 sec
Reputation Power: 0

@Beuge
Thanks, that whas the overlooked mistake :-(

Cheers
acki4711

Developer Shed Advertisers and Affiliates