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

Code:

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

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

Code:

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

Code:

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

Code:

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

Code:

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

Originally Posted by jscheuer1

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.

Thread: how to dynamically change table cell borders?

Thread Tools

Search Thread

how to dynamically change table cell borders?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions