Question

I have a code like this –

    <div id="doc">
    <div id="main">
    <table id="vtier#1">
        <tr>
            <td><button> onclick="delVtier(this);return false;" </button></td>
            <td>1.Vtier Name: 
            <select id="vtier" name="vtierN" onchange="populateTable(this,VtierAccountForm); return false;">
        <option>ANY</option>
    </select></td>
        </tr>
    </table>
<table id="subAccTable">
        <tr>
            <td>
            <h2>Sub Accounts</h2>
            </td>
        </tr>
        <tr>
            <th>action</th>
            <thaccount/></th>
            <th>homeDir</th>
            <th>primaryGroup</th>
        </tr>
</table>
<script>
function populateTable(src,form) {
    var div = src.parentNode.parentNode.parentNode.parentNode;

        alert(div.childNodes[2].innerHTML);


}
</script>

Now inside the populateTable function i have the node of the select tag from the first table. Using this node how can i reach to the node of the second table in my div. I have tried using childNodes[2] but it doesn’t work. However childNodes[1] in the alert above correctly prints the innerHTML of the first table. Please help !

Answer 1

assuming the variable ‘table’ points to the first table

   var elem = table; 
   while(elem = elem.nextSibling){
      if (elem.tagName.toLowerCase() == 'table'){
         var nextTable = elem;
         break;
      }
    }

nextTable will contain the other table