Question

我有这样的代码 -

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

现在在populateTable函数中，我有第一个表中的select标记的节点。使用此节点如何到达div中第二个表的节点。我尝试过使用childNodes [2]，但它不起作用。但是，上面警告中的childNodes [1]正确打印了第一个表的innerHTML。请帮忙！

Answer 1

为什么不通过document.getElementById("subAccTable")直接访问它？

Answer 2

假设变量'table'指向第一个表

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

nextTable将包含另一个表

Answer 3

src.parentNode.parentNode.parentNode.parentNode实际上正在解析您的第一张桌子。（这是因为src.parentNode.parentNode.parentNode返回tbody元素。）你需要越过一个级别：

var div = src.parentNode.parentNode.parentNode.parentNode.parentNode;

虽然正如其他人所说的那样，通过其ID来引用该表会更加清晰。

Answer 4

childNodes ^[MDN]返回所有DOM节点的列表，也包括文本（换行符等）。您可以使用children ^[MDN]来仅丢失元素节点。

parentNode链也不好看。由于您的表有ID，为什么不这样做：

var targetTable = document.getElementById('subAccTable');

或者，如果表格没有ID，您可以使用getElementsByTagName：

var targetTable = document.getElementById('main').getElementsByTagName('table')[1];

Answer 5

元素索引是基于零的，因此div.childNodes[2]将导致null或undefined（我不记得是哪个）。或者您可以像其他人建议的那样使用document.getElementById('subAccTable')。

JavaScript：如何使用第一个表的节点访问div内的第二个表

5 个答案: