Question

I’m a bit confused regarding HTML DOM. I’m trying to get the rows of a particular <table> so that I can interate through them.

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>

What I’ve done in JS and Jquery:

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

The above line got me some weird childNodes. I got rows[] having a ‘text’ child, and a <table> child!!
So I also tried:

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

This second line gave the following childNodes as seen in Google Chrome while debugging:
0: HTMLTableRowElement
1: Text
2: HTMLTableRowElement
3: Text
4: HTMLTableRowElement
5: Text
6: HTMLTableRowElement
7: Text
8: HTMLTableRowElement
9: Text

Why did’nt the 2nd line get JUST the rows?? And why didn’t the 1st line itself just fetch all the rows?

Answer 1

1. The browser adds a <tbody> which is why you can’t acess the <tr> directly.

2. The childnodes “Text” refer to the whitespaces between your rows. Just remove the linebreaks and you are fine.

I prefer using querySelectorAll:

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

but if you are concerned about IE6 users, your selection would look like this:

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