Log in

View Full Version : Resolved how to dynamically change table cell borders?


onoprise
12-03-2008, 09:11 PM
i need help trying to dynamically change the border of tables cells.

below is how i am finding all the table cells

var arrayTD = new Array();
arrayTD = document.getElementsByName("cell");

below is an array that defines which vertical line need to be turned on or off.

var arrayVLines = new Array("1","1","0");

below is the javascript i am trying to use to change the left borders of the cells, it is currently in a function that runs at body onload, but does not work

for (j = 1; j < arrayVLines.length; j++) {
if (arrayVlines[j] == "1"){
arrayTD.item(j).style = "border-left: #666699 solid 2px;";
}
else {
arrayTD.item(j).style = "border: #DDDDEE solid 1px;";
}
}

and below is a sample table i am working with

<form id=frm1 name=frm1>
<table cellspacing="0" class="t" name="tbl1" id="tbl1">
<tbody>
<tr>
<td name="cell" id="c00" class="c0">
<input id="f00" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n00" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
<td name="cell" id="c10" class="c0">
<input id="f01" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n01" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
<td name="cell" id="c20" class="c0">
<input id="f02" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n02" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
<td name="cell" id="c30" class="c0">
<input id="f03" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n03" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
</tr>
</tbody>
</table>
</form>

please let me know if you can help. thanks in advance.
jscheuer1
12-04-2008, 07:56 AM
Name is not a valid attribute for a table cell. But that's the least of your problems, as most browsers will forgive that, this will work:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var arrayTD = document.getElementsByTagName('td');
var arrayVLines = [1,1,0];
onload = function(){
for (var j = 0; j < arrayVLines.length; j++) {
if (arrayVLines[j]){
arrayTD.item(j).style.borderLeft = '#666699 solid 2px';
}
else {
arrayTD.item(j).border = '#DDDDEE solid 1px';
}
}
};
</script>
</head>
<body>
<form id=frm1 name=frm1>
<table cellspacing="0" class="t" name="tbl1" id="tbl1">
<tbody>
<tr>
<td id="c00" class="c0">
<input id="f00" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n00" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
<td id="c10" class="c0">
<input id="f01" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n01" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
<td id="c20" class="c0">
<input id="f02" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n02" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
<td id="c30" class="c0">
<input id="f03" value="" maxlength="2" autocomplete="off" size="4" class="s0" disabled="disabled"/>
<input name="numbr" id="n03" value="" maxlength="2" autocomplete="off" size="1" class="d0"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Snowcore
12-04-2008, 11:21 AM
Try to use jQuery framework, and you will be able to do this work in one line of code...
onoprise
12-04-2008, 11:58 AM
Name is not a valid attribute for a table cell. But that's the least of your problems, as most browsers will forgive that, this will work:

Thanks for your help. Another off topic question for you, what is the best way for a newbie like me to validate my code? Any recommending sites? Thanks again.
jscheuer1
12-04-2008, 01:26 PM
If you are completely unfamiliar with the standards and best practices of coding HTML, css style, and javascript, there is no easy way. However, for HTML and css style there are the W3C validators:

http://validator.w3.org/

and:

http://jigsaw.w3.org/css-validator/

For javascript, there is jslint:

http://www.jslint.com/

None of these will help your code work if it is just plain wrong, but they will eliminate many common errors and help increase the chance that the code is valid.

A good browser like FF with a decent error console also helps a lot.

I would suggest just picking one type of code that you want to improve in and working with the validator for that one until you understand its use. If you haven't worked with any of them before, trying to work with all three at once would probably be too intense.