select html table cell values when clicking on a row

**aintruder123** · 07-23-2006, 04:28 PM

Hi guys, I’m trying to do script that selects a specific cell value when I click on a specific row. Example, if I have a table of 4(rows) x 4(columns)
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

I want to select the 9 and the 10 when I click on the row. Better yet, regardless of the number of the row that I click (I can have 200 rows) I want to select any cell value I specify I want to select from the row I click.

I really need help, I new to JavaScript and I’m going; NUTS !

Thanks in advance.

**funkdaddu** · 08:55 PM

Here is one way to do it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style>
			td {
				width: 2em;
				height: 2em;
				padding: 2em;
				text-align: center;	
			}
			tr:hover {
				cursor: pointer;
				background-color: whitesmoke;
			}
			.select {
				background-color: yellow;	
			}
		</style>
		<script type="text/javascript"><!--
var td1 = null;
var td2 = null;

function highlight(obj) {
	if (td1 || td2) {
		td1.className = null;
		td2.className = null;
	}

	obj.cells[0].className = "select";
	obj.cells[1].className = "select";
	
	td1 = obj.cells[0];
	td2 = obj.cells[1];
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<table>
			<tr onclick="highlight(this);">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr onclick="highlight(this);">
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
			<tr onclick="highlight(this);">
				<td>9</td>
				<td>10</td>
				<td>11</td>
				<td>12</td>
			</tr>
		</table>
	</body>

</html>

Though, I was going to assign the onclick="highlight(this)" to the rows with a window.onload command, but after I put the rows into an array, and ran through them, it didn't work. Anyone else have any ideas?:

Code:

window.onload = function() {
	var theRows = document.getElementsByTagName("tr");
	for (i in theRows) {
		i.onclick = function() {
			highlight(this);
		}
	}
}