faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

52 of 76 people (68%) answered Yes
Recently 4 of 10 people (40%) answered Yes

Entry

How can i change the BGCOLOR of a non id'd table ?

Apr 6th, 2008 19:28
ha mo, Russ Locke, Colin Fraser, Mikey Roach,


<html>
  <head>
    <script language="javascript">
      // generic DOM code returns the table element from a child node
      function findTableParent(node) {
        var node = node.parentNode;
        while (node.tagName != "TABLE") {
          node = node.parentNode;
        }
        return node;
      }
      // generic DOM code returns the table element from the document
      // determined by a given index
      function findTableIndexed(theIndex) {
        return (document.getElementsByTagName('TABLE'))[theIndex];
      }
      // trigger function for changing a tables background color
      function changeTableColor(theTable,theColor) {
        theTable.style.backgroundColor = theColor;
      }
    </script>
  </head>
  <body>
    <table border=1>
      <tr>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#cc0033'); return false;">Red</a></td>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#ffffff'); return false;">White</a></td>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#3366ff'); return false;">Blue</a></td>
      </tr>
    </table>
    <br>
    <table border=1>
      <tr>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#339900'); return false;">Green</a></td>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#ffff00'); return false;">Yellow</a></td>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#996633'); return false;">Brown</a></td>
      </tr>
    </table>
    <br>
    <table border=1>
      <tr>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#66ffcc'); return false;">Aqua</a></td>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#ff9933'); return false;">Orange</a></td>
        <td><a href="javascript:void 0;" onclick="changeTableColor
(findTableParent(this),'#000000'); return false;">Black</a></td>
      </tr>
    </table>
    <br>
    <a href="javascript:void 0;" onclick="changeTableColor
(findTableIndexed(0),'#ff00cc'); return false;">Pink</a> (1st table = 
index 0)
    <br>
    <a href="javascript:void 0;" onclick="changeTableColor
(findTableIndexed(1),'#999999'); return false;">Grey</a> (2nd table = 
index 1)
    <br>
    <a href="javascript:void 0;" onclick="changeTableColor
(findTableIndexed(2),'#660099'); return false;">Purple</a> (3rd table = 
index 2)
  </body>
</html>
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com