javascript - 获取 HTML 表的 childNodes 时出错

Question

我对 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;

上面一行让我得到了一些奇怪的子节点。我得到 rows[] 有一个 'text' child ，和一个 <table> child !!所以我也尝试了:

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

第二行给出了调试时在 Google Chrome 中看到的以下子节点:0:HTMLTableRowElement1:文字2:HTML表格行元素3:文字4: HTMLTableRowElement5:文字6: HTMLTableRowElement7:文字8: HTMLTableRowElement9: 文本

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

Answer 1

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

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

我更喜欢使用 querySelectorAll :

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

但是如果您关心 IE6 用户，您的选择应该是这样的:

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