Page 1 of 1

DHTML locating an element with no ID

Posted: Wed Apr 25, 2012 9:01 am
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?

Re: DHTML locating an element with no ID

Posted: Wed Apr 25, 2012 2:34 pm
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.

Re: DHTML locating an element with no ID

Posted: Wed Apr 25, 2012 5:38 pm
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:

Re: DHTML locating an element with no ID

Posted: Thu Apr 26, 2012 1:31 pm
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.