testTables.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Testing Tables</title>
    <script language="JavaScript">

      // -----------------------------------------------------------
      function showTableDOM(){
        var theTable = document.getElementById('theTable');
        var result = walkTree(theTable,"",0);
        var theDiv = document.getElementById('putAnswerHere');
        theDiv.innerHTML = "<pre>\n" + result + "</pre>\n";
      }

      // -----------------------------------------------------------
      // First time I write this I tried looping with 
      // (var i in theNode.childNodes),
      // which did the wrong thing.  childNodes returns a "NodeList object", 
      // which can act mostly like an array but isn't one.
      // The actual parameters of the childNodes are "length", and "item()";
      // childNodes[i] is actually childNodes.item(i).
      function walkTree(theNode,tabs,depth){
        var result = ""+depth+":"+tabs+theNode+"\n";
        for (var i=0; i<theNode.childNodes.length; i++){   //>
          result += walkTree(theNode.childNodes[i],tabs+" - ",depth+1);
        }
        return result;
      }

      // -----------------------------------------------------------
      // This works in all three: 
      // mozilla 1.3, Explorer 5.2 Mac, Safari 1.0beta v60;
      function addRow(){
        var theTable = document.getElementById('theTable');
        var newTr = document.createElement('tr');
        for (var i=0; i<3; i++){ 
          var newTd = document.createElement('td');
          newTd.appendChild( document.createTextNode("new "+i));
          newTr.appendChild(newTd);
        }
        var tbody = theTable.getElementsByTagName('tbody')[0];
        tbody.appendChild(newTr);
      }

      // -----------------------------------------------------------
      // Note that getAttribute() returns a string here (!); 
      // I must explicitly convert to a number before adding 1, or 
      // it goes from border = 1 to 11 to 111 on successive clicks.
      function growBorder(){
        var theTable = document.getElementById('theTable'); 
        var border = parseInt(theTable.getAttribute('border'));
        //alert(" border = " + border );
        theTable.setAttribute('border', border+1);
      }

      // -----------------------------------------------------------
      // This also works in all three.
      function insertRow(){
        var theTable = document.getElementById('theTable');
        var newTr = document.createElement('tr');
        for (var i=0; i<3; i++){
          var newTd = document.createElement('td');
          newTd.appendChild( document.createTextNode("insert "+i));
          newTr.appendChild(newTd);
        }
        var tbody = theTable.getElementsByTagName('tbody')[0];
        var bottomRow = document.getElementById('bottomRow');
        tbody.insertBefore(newTr,bottomRow);
      }

      // -----------------------------------------------------------
      // Insert a new row that contains images and links
      // using DOM calls rather than node.innerHTML.
      // This one has weird behavior in Explorer 5.2 Mac; 
      // the table cells get wider around the image and link 
      // with each row inserted.
      function insertImageRow(){
        var theTable = document.getElementById('theTable'); 
        var newTr = document.createElement('tr');
        for (var i=0; i<3; i++){
          var newTd = document.createElement('td');
          var inside;
          if (i==2){
            inside = document.createElement('a');
            inside.href='javascript:growBorder()';
            inside.appendChild( document.createTextNode("grow") );
          }
          else {
            inside = document.createElement('img'); 
            inside.src = "box.gif";
            inside.height = 16*(i+1); 
            inside.width = 16*(i+1);
          }
          newTd.appendChild(inside);
          newTd.width = 10;
          newTr.appendChild(newTd);
        }
        var tbody = theTable.getElementsByTagName('tbody')[0];
        var bottomRow = document.getElementById('bottomRow');
        tbody.insertBefore(newTr,bottomRow);
      }

      // -----------------------------------------------------------
      // another try, with .innerHTML.
      // This works as well as the other, namely
      // it's OK on Mozilla, Safari, and in Explorer Mac it
      // grows the row too wide at the insertBefore() step.
      function insertImageRow2(){
        var theTable = document.getElementById('theTable'); 
        var newTr = document.createElement('tr');
        for (var i=0; i<3; i++){
          var newTd = document.createElement('td');
          if (i==2){
            newTd.innerHTML = "<a href='javascript:growBorder()'>grow</a>";
          }
          else {
            newTd.innerHTML = "<img src='box.gif' border=0>";
          }
          newTr.appendChild(newTd);
        }
        var tbody = theTable.getElementsByTagName('tbody')[0];
        var bottomRow = document.getElementById('bottomRow');
        tbody.insertBefore(newTr,bottomRow);
      }


    </script>
  </head>

  <body bgcolor='white'>
    
    <h1>Testing Tables with Images</h1>

    <table border="1" id="theTable">
      <tbody>
	<tr>
	  <td>top left</td>
	  <td>top center</td>
	  <td>top right</td>
	</tr>
	<tr id="bottomRow">
	  <td>bottom left</td>
	  <td>bottom center</td>
	  <td>bottom right</td>
	</tr>
      </tbody>
    </table>

    <p></p>

    <a href="javascript:showTableDOM()">show table DOM</a> | 
    <a href="javascript:addRow()">add row</a> |
    <a href="javascript:growBorder()">grow border</a><br>
    <a href="javascript:insertRow()">insert plain row</a> |
    <a href="javascript:insertImageRow()">insert image row</a> |
    <a href="javascript:insertImageRow2()">insert image row v2</a>

    <div id="putAnswerHere">&nbsp;</div>
    
    <hr>
    
    <address><a href="mailto:mahoney@marlboro.edu">Jim Mahoney</a></address>
<!-- Created: Thu Mar 27 10:36:43 EST 2003 -->
<!-- hhmts start -->
Last modified: Thu Mar 27 23:47:09 EST 2003
<!-- hhmts end -->

  </body>
</html>