Results 1 to 5 of 5

Thread: how to dynamically change table cell borders?

  1. #1
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default how to dynamically change table cell borders?

    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.
    Last edited by onoprise; 12-07-2008 at 12:13 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 12-04-2008 at 08:19 AM. Reason: fix undeclared variable 'j'
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    onoprise (12-04-2008)

  4. #3
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try to use jQuery framework, and you will be able to do this work in one line of code...

  5. #4
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •