Question

我对HTML DOM感到有些困惑。我试图获取特定<table>的行，以便我可以通过它们进行交互。

HTML MARKUP：

    <table style="width:70%" id="PersonalInfoExtendedModel_Table" >
      <tr>
      <td><span id="PersonalInfoExtendedModel_FirstName">@Html.DisplayFor(m => m.FirstName)</span></td>
      <td><span id="PersonalInfoExtendedModel_JobLocation">@Html.DisplayFor(m => m.JobLocation)</span></td>

      </tr>

      <tr>
      <td><span id="PersonalInfoExtendedModel_MiddleName">@Html.DisplayFor(m => m.MiddleName)</span></td>
      <td><span id="PersonalInfoExtendedModel_StateOfResidence">@Html.DisplayFor(m => m.StateOfResidence)</span></td>

      </tr>

      <tr>
      <td><span id="PersonalInfoExtendedModel_LastName">@Html.DisplayFor(m => m.LastName)</span></td>
      <td><span id="PersonalInfoExtendedModel_SSN">@Html.DisplayFor(m => m.SSN)</span></td>

      </tr>

      <tr>
      <td><span id="PersonalInfoExtendedModel_Suffix">@Html.DisplayFor(m => m.Suffix)</span></td>
      <td><span id="PersonalInfoExtendedModel_USDriversLicenseNumber">@Html.DisplayFor(m => m.USDriversLicenseNumber)</span>&nbsp;&nbsp;<span id="PersonalInfoExtendedModel_USDriversLicenseState">@Html.DisplayFor(m => m.USDriversLicenseState)</span></td>

  </tr>

  <tr>
  <td><span id="PersonalInfoExtendedModel_DOB_Date">@Html.DisplayFor(m => m.DOB_Date)</span>&nbsp;<span id="PersonalInfoExtendedModel_DOB_Month">@Html.DisplayFor(m => m.DOB_Month)</span>&nbsp;<span id="PersonalInfoExtendedModel_DOB_Year">@Html.DisplayFor(m => m.DOB_Year)</span></td>
  <td></td>
  </tr>
</table>

我在JS和Jquery所做的事情：

var rows = document.getElementById(model + "_Table").childNodes;

以上一行给我带来了一些奇怪的childNodes。我的行[]有一个＆＃39;文本＆＃39;孩子和一个<table>孩子!! 所以我也试过了：

var rows = document.getElementById(model + "_Table").childNodes[1].childNodes;

第二行提供了以下在调试时在Google Chrome中看到的childNodes： 0：HTMLTableRowElement 1：文字 2：HTMLTableRowElement 3：文字 4：HTMLTableRowElement 5：文字 6：HTMLTableRowElement 7：文字 8：HTMLTableRowElement 9：文字

为什么第二行得到JUST行？为什么第一行本身只取得所有行？

Answer 1

以上一行给我带来了一些奇怪的childNodes。我的行[]有一个'text'孩子，还有一个<table>孩子!!

我怀疑你看到的是tbody孩子，而不是table孩子。所有表格至少有一个tbody element。如果您没有在标记中提供一个，浏览器将为您添加它（在标准模式下;我不知道在怪癖模式下会发生什么，因为我从不在怪癖模式下工作）。该表还可以有一个Text节点用于其中的空格。你提到了Chrome;您可以使用开发工具的“元素”选项卡来浏览浏览器为响应您的标记而创建的DOM。

如果要从表中获取tr元素，如果没有嵌套表，则可以执行以下操作：

var rows = document.getElementById(model + "_Table").getElementsByTagName('tr');

或者，您可以使用rows property，它为您提供表自己的行（而不是嵌套表的行）：

var rows = document.getElementById(model + "_Table").rows;

请注意，rows元素上的table将包含表格的tbody，thead和tfoot子元素中的所有行。如果您仅想要特定rows的{{1}}，则每个tbody都有自己的rows property。

Answer 2

浏览器会添加<tbody>，这就是您无法直接访问<tr>的原因。
子节点“文本”指的是行之间的空格。只需删除换行符即可。

我更喜欢使用querySelectorAll：

document.querySelectorAll("#"+model + "_Table tr")

但如果您担心IE6用户，您的选择将如下所示：

var rows = document.getElementById(model + "_Table").rows;

获取HTML表格的childNodes时出错

2 个答案: