Problem with document.getElementById(id).value

**Dormilich** · Apr 6 '09, 05:39 AM

there is no value property in HTMLTableCellEl ement (even if you define a value attribute)

PS: check out the HTML Validation service

**acoder** · Apr 6 '09, 12:19 PM

Also note that IDs cannot (or should not) start with a number - see link.

**Dormilich** · Apr 6 '09, 12:22 PM

Originally posted by acoder

Also note that IDs cannot (or should not) start with a number.

browsers are quite forgiving*. though, of course, the document will be invalid then.

* tested it myself

**phub11** · Apr 6 '09, 02:25 PM

Thanks for the replies. I'm adopting a script I found at the following URL

DEVShed

http://forums.devshed.com/javascript-development-115/javascript-select-range-of-cells-in-table-87376-2.html

Founded in 1997, DEVShed is the perfect place for web developers to learn, share their work, and build upon the ideas of others.

My version works by using onmousedown to select any cell in a table, and with onmouseover and onmouseup, select a rectangular range of cells. I'd like to put the selected cell IDs (or VALUES) in an array (for PHP later on). Here's my current script....

Code:

function checkHighlight (id)
{
	var idmarker 		= id.split( '.' );
	var column;
	var row;

for ( row = startrow; row <= tableRows; row++ )
	{
for ( column = startcol; column <= tableColumns; column++ )
		{
			document.getElementById( column + '.' + row ).style.backgroundColor	= '#FFFFFF';
		}
	}
counter=0;
myCells=new Array();
for ( row = startrow; row <= idmarker[1]; row++ )
	{
for ( column = startcol; column <= idmarker[0]; column++ )
		{	
			document.getElementById( column + '.' + row ).style.backgroundColor	= highlightColor;
counter++;
myCells[counter]=document.getElementById(id).innerHTML;
		}
	}	
//	document.getElementById( 'tableSize' ).innerHTML	= idmarker[1] + 'x' + idmarker[0];
//	document.getElementById( 'tableSize' ).innerHTML	= myCells[0]+','+myCells[1]+','+myCells[2];
}

Unfortunately this just fills the array with duplicates of the last cell selected. Any sugesstions to fill the array with all the cells selected?

Thanks in advance!

**phub11** · Apr 6 '09, 03:51 PM

Hi again,

I have attached a tidied-up version which should be easier to follow. Any help in putting the selected cells in an array is greatly appreciated!

Code:

function checkHighlight (id)
{
	var idmarker 		= id.split( '.' );
	var column;
	var row;
var string = "";

for ( row = startrow; row <= tableRows; row++ )
	{
for ( column = startcol; column <= tableColumns; column++ )
		{
			document.getElementById( column + '.' + row ).style.backgroundColor	= '#FFFFFF';
		}
	}
counter=0;
myCells=new Array();
for ( row = startrow; row <= idmarker[1]; row++ )
	{
for ( column = startcol; column <= idmarker[0]; column++ )
		{	
			document.getElementById( column + '.' + row ).style.backgroundColor	= highlightColor;
myCells[counter]=document.getElementById(id).innerHTML;
counter++;
		}
	}	
//	document.getElementById( 'tableSize' ).innerHTML	= idmarker[1] + 'x' + idmarker[0];
for ( arraycnt = 0; arraycnt < counter; arraycnt++ )
{
if (string==""){ 
string = myCells[arraycnt]
} else {
string = string + ',' + myCells[arraycnt]
}
}
	document.getElementById( 'selectedCells' ).innerHTML	= 'SELECTED CELLS:'+string;
}

Thanks for any help!

**acoder** · Apr 7 '09, 11:31 AM

Perhaps it might help if you give the values of startcol/row, etc. that are not defined within the function and the HTML of the table so that we're not second-guessing what you're using.

**phub11** · Apr 7 '09, 03:15 PM

Thanks for the reply.

Below is all the code... as you can see the array just duplicates the bottom right-most cell selected.

Any help gratefully appreciated!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">

function myClick(id){
startnum = document.getElementById(id).id;
start = id.split( '.' );
startcol = start[0];
startrow = start[1];
}

function myHighlight(id){
var idmarker=id.split( '.' );
var column;
var row;
var string = "";
for ( row = startrow; row <= 4; row++ )
{
for ( column = startcol; column <= 4; column++ )
{
document.getElementById( column + '.' + row ).style.backgroundColor='#FFFFFF';
}
}

counter=0;
myCells=new Array();

for ( row = startrow; row <= idmarker[1]; row++ )
{
for ( column = startcol; column <= idmarker[0]; column++ )
{
document.getElementById( column + '.' + row ).style.backgroundColor='#004080';
myCells[counter]=document.getElementById(id).innerHTML;
counter++;
}
}
for ( arraycnt = 0; arraycnt < counter; arraycnt++ )
{
if (string==""){ 
string = myCells[arraycnt]
} else {
string = string + ',' + myCells[arraycnt]
}
}
document.getElementById( 'selectedCells' ).innerHTML	= 'SELECTED CELLS:'+string;
}

function myRelease(id){
}

</script>
</head>
<body>
<table id="table1" style="text-align: left; width: 400px;" border="2"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>A</td>
      <td id="1.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">1</td>
      <td id="2.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">2</td>
      <td id="3.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">3</td>
      <td id="4.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">4</td>
    </tr>
    <tr>
      <td>B</td>
      <td id="1.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">5</td>
      <td id="2.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">6</td>
      <td id="3.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">7</td>
      <td id="4.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">8</td>
    </tr>
    <tr>
      <td>C</td>
      <td id="1.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">9</td>
      <td id="2.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">10</td>
      <td id="3.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">11</td>
      <td id="4.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">12</td>
    </tr>
    <tr>
      <td>D</td>
      <td id="1.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">13</td>
      <td id="2.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">14</td>
      <td id="3.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">15</td>
      <td id="4.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">16</td>
    </tr>
<TR>
<TD id="selectedCells" colspan="5" rowspan="1" style="text-align:left">SELECTED CELLS:</TD>
</TR>
  </tbody>
</table>
<br>
</body>
</html>

**acoder** · Apr 7 '09, 03:26 PM

Line 34 should be:

Code:

myCells[counter]=document.getElementById(column + '.' + row).innerHTML;

Note that if you mouse over without having first clicked, you will get an error because startcol/row won't have been set. Another problem is that when you click on another cell, you need to reset the background colours.

**phub11** · Apr 7 '09, 03:56 PM

Doh! Thanks for the correction!

Yeah, I'm trying to set things up so that cells are selected by click-drag-and-release. I only want "onmouseove r" activated while "onmousedow n" is active. I'm guessing I need to embed the myHighlight function when myClick is engaged. Any ideas on how I might do this?

Thanks!

**acoder** · Apr 7 '09, 06:23 PM

You may want to look into the onmousemove event.

**phub11** · Apr 8 '09, 04:27 PM

Okay... I've figured out how to enable and disable "onmousemov e", depending on whether a mouse button event is flagged down or up, but could someone explain to my why the "id" of the selected cell now isn't being passed to the function:

Code:

window.onload = function() {
//monitor mouseclicks over "mytable"
	document.getElementById("mytable").onmousedown = mouseDownHandler
	document.getElementById("mytable").onmouseup   = mouseUpHandler
}

function mouseDownHandler() {
startnum = document.getElementById(this.id).id;
alert(startnum);
}

</script>
</head>
<body>
<table id="mytable"  style="text-align: left; width: 400px;" border="2"
 cellpadding="2" cellspacing="2">
  <tbody>
     <tr>
      <td>A</td>
      <td id="1.1">1</td>
      <td id="2.1">2</td>
      <td id="3.1">3</td>
      <td id="4.1">4</td>
    </tr>

Thanks!

**Dormilich** · Apr 8 '09, 04:42 PM

line 8 seems strange, wouldn't be startnum = this.id; be more reasonable?

**phub11** · Apr 8 '09, 05:09 PM

Thanks for the reply!

I now get an alert (i.e., startnum is assigned), but "this.id" is always assigned "mytable" rather than the id of the cell I just clicked.

Yeah, I've a lot to learn regarding DOMs.

Thanks in advance for any further help!

**phub11** · Apr 8 '09, 06:10 PM

Figured it out...

Code:

function mouseDownHandler(e) {
startnum = e.target.id;
alert(startnum);
}

Problem with document.getElementById(id).value

Problem with document.getElementById(id).value

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment