PDA

View Full Version : 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.


<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
<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
<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?


<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:


<!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>

kawi6rr
09-01-2012, 02:23 AM
I kind of thought that was the part of the issue, thanks!!