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