1

我对 HTML DOM 有点困惑。我正在尝试获取特定的行，<table>以便我可以通过它们进行交互。

HTML 标记：

    <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。我的 rows[] 有一个“文本”孩子和一个<table>孩子！！所以我也尝试了：

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

在调试时，第二行给出了在 Google Chrome 中看到的以下 childNode： 0：HTMLTableRowElement 1：Text 2：HTMLTableRowElement 3：Text 4：HTMLTableRowElement 5：Text 6：HTMLTableRowElement 7：Text 8：HTMLTableRowElement 9：Text

为什么第二行没有得到只是行？为什么第一行本身不获取所有行？

4

2 回答 2

2

上面这行给了我一些奇怪的 childNodes。我的 rows[] 有一个“文本”孩子和一个<table>孩子！！

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

如果tr要从表中获取元素，如果没有嵌套表，可以这样做：

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

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

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

请注意，元素rows上的将包括表中的table所有行和子元素。如果只想要某一个，各有各的属性。tbodytheadtfootrowstbodytbodyrows

于 2012-05-29T08:35:50.380 回答
2

  1. 浏览器添加了一个<tbody>，这就是您无法直接访问的原因<tr>。

  2. 子节点“文本”指的是行之间的空格。只需删除换行符就可以了。

我更喜欢使用querySelectorAll：

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

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

var rows = document.getElementById(model + "_Table").rows;
于 2012-05-29T08:41:49.530 回答