CODEWITHSUNDEEP
javascriptdom
karan k
karan k

Reputation: 977

Mistake in fetching childNodes of HTML table

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?

Upvotes: 1

Views: 3937

Answers (2)

Christoph
Christoph

Reputation: 51201

  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;

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075029

The above line got me some weird childNodes. I got rows[] having a 'text' child, and a <table> child!!

I suspect you're seeing a tbody child, not a table child. All tables have at least one tbody element. If you don't supply one in your markup, the browser will add it for you (in standards mode; I don't know what happens in quirks mode as I never work in quirks mode). The table may also have a Text node for the whitespace in it. You mentioned Chrome; you can use the "Elements" tab of the dev tools to explore the DOM created by the browser in response to your markup.

If you want to get the tr elements from the table, if there are no nested tables, you can do this:

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

Alternately, you can use the rows property, which gives you the table's own rows (and not the rows of nested tables):

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

Note that the rows on the table element will include all rows in tbody, thead, and tfoot child elements of the table. If you only want the rows of a particular tbody, each tbody has its own rows property.

Upvotes: 2

Related Questions