DHTML locating an element with no ID

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
wvoyance
Forum Contributor
Posts: 135
Joined: Tue Apr 17, 2012 8:24 pm

DHTML locating an element with no ID

Post by wvoyance »

The HTML looks like this:

Code: Select all

          <tr>
            <td class="main"></td>
            <td class="main" [color=#FF4080]id=pn2[/color]><img src="/catalog/includes/languages/tchinese/images/icon.gif" border="0" alt="Chinese" title="Chinese">&nbsp;<input type="text" name="products_name[3]" /></td>
          </tr>
	  
		  <tr bgcolor="#ebebff">
            <td></td>
            <th class="main">If any of the following extra fields do not apply to this product leave them blank if it is a text or checkbox field or set to &ldquo;Does Not Apply&rdquo; if it is a drop down list or radio button field.</th>
          </tr>
          <tr bgcolor="#ebebff" >
            <td class="main">author:</td>
            <td class="main"><img src="/catalog/includes/languages/english/images/icon.gif" border="0" alt="English" title="English">&nbsp;<input type="text" name="extra_value2_1" maxlength=100 size=100 /></td>
          </tr>
          <tr bgcolor="#ebebff" >
            <td class="main">auteur:</td>
            <td class="main"><img src="/catalog/includes/languages/french/images/icon.gif" border="0" alt="French" title="French">&nbsp;<input type="text" name="extra_value2_2" maxlength=100 size=100 /></td>
          </tr>
The first <tr> ....</tr> I can give it an ID. But the followings, cannot. Because it is generated by some PHP functions,
which is out of my control. Is there anyway to say " I want to select the second <tr> element after ID=pn2 " or something similar?
Last edited by pickle on Wed Apr 25, 2012 5:02 pm, edited 1 time in total.
Reason: Adding HTML tags
User avatar
tr0gd0rr
Forum Contributor
Posts: 305
Joined: Thu May 11, 2006 8:58 pm
Location: Utah, USA

Re: DHTML locating an element with no ID

Post by tr0gd0rr »

Such a selection is esoteric and prone to break if your html changes. That being said, If you use jQuery, you can do

Code: Select all

var $tr = $('#pn2') // get the td element with id pn2
  .parent() // get the tr that #pn2 is within
  .next()   // get the next tr
  .next()   // get the next tr
;
Note that the code above will only work if the `tr` elements are within the same table section (e.g. within one `tbody`)
Without jQuery, you could do something similar using `parentNode` and `nextSibling` but you have to account for text nodes (whitespace) between `tr` elements:

Code: Select all

var tr = document.getElementById('pn2') // get the td element with id pn2
  .parentNode  // get the tr that #pn2 is within
;
var next = tr, found = 0;
while ((next = next.nextSibling)) { // bail when we have run out of tr elements
  if (next.nodeType == 1 /* 1 = ELEMENT that must be tr, not whitespace */) {
    if (++found == 2) {
      // bail on the second tr
      tr = next;
      break;
    }
  }
}
Note that this only works because tables are rigidly structured: the parent of a td is always a tr and tr elements are always siblings of other tr elements.
User avatar
wvoyance
Forum Contributor
Posts: 135
Joined: Tue Apr 17, 2012 8:24 pm

Re: DHTML locating an element with no ID

Post by wvoyance »

1. What about the structures within a <td>
in my example I want to select only <input type="text" name="extra_value2_2" maxlength=100 size=100 />

2. Is there any book talk about these?

3. Thanks. :P :banghead:
User avatar
tr0gd0rr
Forum Contributor
Posts: 305
Joined: Thu May 11, 2006 8:58 pm
Location: Utah, USA

Re: DHTML locating an element with no ID

Post by tr0gd0rr »

If you use jQuery, you can pass parameters to `.parent()` like `.parent('tr')` to get the first ancestor that matches the selector `tr` (i.e. the first ancestor tr element). You can also use `.find(selector)` to find descendents matching a certain selector. Without jQuery, this kind of arbitrary parsing can be pretty painful on IE in terms of the volume of code. If you don't care about IE, you can use `document.querySelectorAll()` to do the work of selecting descendents. And of course there are plenty of other JavaScript libraries out there that simplify traversing the DOM in various ways.

As far as online information, you can consult the documentation for jQuery or other libraries or look at MDN (Mozilla Development Network) for documentation on raw JavaScript including traversing the DOM. As far as books, you can start with general JavaScript books like "The Good Parts" by Douglas Crockford.
Post Reply