Loop through table to get TD value?

**kawi6rr** · 08-30-2012, 07:36 PM

I'm trying to loop through a table to get each TD value. If the value is below a specific number then I'll do something.
Any help is appreciated, thanks.

Code:

<script type="text/javascript">
function checkForm() {
    rows = document.getElementById('tableData').getElementsByTagName('TR');
    col = rows[i].getElementsByTagName('TD');
	for (var d = 0; d < col.length;d++) {
		if (col[d].className == "TD") {
			var contents = col[d].innerHTML;
			confirm(d + ',' + contents);
			alert("col");
			if (col < "5")
				alert("Less then 5");
			if (col > 5)
				alert("Great then 5");
			}
		}
	}
</script>

<body onload="checkForm">
<table id="tableData" name="tableData">
	<tr>
		<td id="TD">10</td>
		<td id="TD">4</td>
		<td id="TD">7</td>
	</tr>
	<tr>
		<td id="TD">8</td>
		<td id="TD">5</td>
		<td id="TD">2</td>
	</tr>
	<tr>
		<td id="TD">3</td>
		<td id="TD">1</td>
		<td id="TD">6</td>
	</tr>
</table>
 </body>

**jscheuer1** · 08-31-2012, 06:34 AM

Code:

<script type="text/javascript">
function checkForm() {
	var cols = document.getElementById('tableData').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].innerHTML <= 5){alert('5 or less');}
		else {alert('Greater than 5');}
	}
}
</script>
</head>
<body onload="checkForm();">
<table id="tableData" name="tableData">
	<tr>
		<td id="TD">10</td>
		<td id="TD">4</td>
		<td id="TD">7</td>
	</tr>
	<tr>
		<td id="TD">8</td>
		<td id="TD">5</td>
		<td id="TD">2</td>
	</tr>
	<tr>
		<td id="TD">3</td>
		<td id="TD">1</td>
		<td id="TD">6</td>
	</tr>
</table>

**kawi6rr** · 08-31-2012, 04:57 PM

Originally Posted by jscheuer1

Code:

<script type="text/javascript">
function checkForm() {
	var cols = document.getElementById('tableData').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].innerHTML <= 5){alert('5 or less');}
		else {alert('Greater than 5');}
	}
}
</script>
</head>
<body onload="checkForm();">
<table id="tableData" name="tableData">
	<tr>
		<td id="TD">10</td>
		<td id="TD">4</td>
		<td id="TD">7</td>
	</tr>
	<tr>
		<td id="TD">8</td>
		<td id="TD">5</td>
		<td id="TD">2</td>
	</tr>
	<tr>
		<td id="TD">3</td>
		<td id="TD">1</td>
		<td id="TD">6</td>
	</tr>
</table>

Thanks! That works great.

**kawi6rr** · 08-31-2012, 05:45 PM

That worked but I can't get it to set the bgcolor to each cell that returns the value needed. It seems to be looping through a little inconsistently and only changes the first TD's bgcolor?

Code:

<script type="text/javascript">

var Green = "#7FFF00"
var Yellow = "#FFFF00"
var Red = "#DC143C"

function checkForm() {
	var cols = document.getElementById('tableData').getElementsByTagName('TD'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].innerHTML <= 4){
			alert('Red');
			document.getElementById('TD').style.backgroundColor=Red; 
			}
		if(cols[i].innerHTML >= 5 || cols[i].innerHTML <= 7) {
			alert('Yellow');
			document.getElementById('TD').style.backgroundColor=Yellow;
			}
		if(cols[i].innerHTML >= 8) {
			alert('Green');
			document.getElementById('TD').style.backgroundColor=Green;
			}
	  }
}
</script>

<table id="tableData" name="tableData" border=1>
	<tr>
		<td id="TD">10</td>
		<td id="TD">4</td>
		<td id="TD">7</td>
	</tr>
	<tr>
		<td id="TD">8</td>
		<td id="TD">5</td>
		<td id="TD">2</td>
	</tr>
	<tr>
		<td id="TD">3</td>
		<td id="TD">1</td>
		<td id="TD">6</td>
	</tr>
</table>

**jscheuer1** · 08-31-2012, 11:31 PM

When using getElementById in javascript there can only be one element per page with a given id. If there's more than one, browsers will either pick the first one, or throw an error. And, although your cascade of if statements is workable, it's less than optimal for the situation. This works:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function checkForm() {
	var cols = document.getElementById('tableData').getElementsByTagName('td'),
	colslen = cols.length, i = -1, color = checkForm.colors, val;
	while(++i < colslen){
		val = cols[i].innerHTML;
		cols[i].style.backgroundColor = val < 5? color.red : val < 8? color.yellow : color.green;
	  }
}
checkForm.colors = {
	green: "#7fff00",
	yellow: "#ffff00",
	red: "#dc143c"
}
</script>
</head>
<body>
<table id="tableData" border=1>
	<tr>
		<td>10</td>
		<td>4</td>
		<td>7</td>
	</tr>
	<tr>
		<td>8</td>
		<td>5</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>1</td>
		<td>6</td>
	</tr>
</table>
<script type="text/javascript">
checkForm();
</script>
</body>
</html>