JavaScript dynamic DOM retrieval Jan03 '07

Your dynamic page generates an HTML table from a database query. Each record has a unique ID, and you use that ID for the id attribute on the <tr> elements:

....

<tr id="myRow_13">

    <td></td>

</tr>

<tr id="myRow_29">

    <td></td>

</tr>

....

This provides each <tr> with a unique ID (id attributes must be unique, anyway), so you can now target specific table rows with JavaScript.

Problem is... how do you know which rows are pulled? In other words, when the page loads the dynamic content, JavaScript won't know which unique id's are actually residing in the DOM.

Proposed definition of "dynamic": could change.

Pull all <tr> elements

JavaScript typically targets specific elements using getElementById(). We won't be able to use this, because we don't know the id's on the page. Instead, let's use getElementsByTagName().

getElementsByTagName() does just what it sounds like - it gets all elements using a certain tag name.

var allTrElements = getElementsByTagName("tr");

This will grab all <tr> elements, and store them into an array, which we can then loop through to perform additional programming.

Problem solved?

Not quite. getElementsByTagName("tr") will pull all <tr> elements on the page, including ones you may not want or need access to.

So how do we pull only the <tr> elements from the specific table with the database rows?

Pull only certain <tr> elements

We can look at the id attribute, and base it off that. If the id attribute starts with "myRow" - then we know that's a <tr> we want to work with.

// STORE ALL <tr> ELEMENTS IN AN ARRAY.

var allTrElements = getElementsByTagName("tr");


// LOOP THROUGH ALL <tr> ELEMENTS ON THE PAGE.

for ( var i=0; i < allTrElements.length; i++ )
{

    // SET THE CURRENT <tr> ELEMENT TO A VARIABLE.

    var tr = allTrElements[i];


    // IF THE CURRENT <tr> HAS AN id ATTRIBUTE
    // THAT BEGINS WITH "myRow", THEN PROCEED.

    if ( tr.id.substr( 0, 5 ) == "myRow" )
    {

        // EXTRACT THE id NUMBER OFF OF THE id ATTRIBUTE.

        var rowId = tr.id.substr( 6 );


        // TARGET THE SPECIFIC ROW.

        var rowTarget = document.getElementById( "myRow_" + rowId );


        // DO SOMETHING SPECIFIC TO THE ROW.

        rowTarget.className = "highlight";

    }

}

So, using the id attribute of the <tr> element, we can throw away the <tr> elements that we don't want to target, as long as each id is named consistently.

Categories: JavaScript , Tutorials

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Popular Pages

  1. Fast rounded corners in Photoshop (7378 recent visits)
  2. PHP – passing variables across pages (2702 recent visits)
  3. JavaScript set selected on load (2271 recent visits)
  4. Removing all child nodes from an element (1648 recent visits)
  5. iPod songs out of order? (1304 recent visits)
  6. Firefox 3 smart address bar: wildcard search (1232 recent visits)
  7. Britney - Everytime piano tab (1109 recent visits)
  8. MySQL LEFT JOIN syntax (931 recent visits)
  9. Breathe Me - Sia (785 recent visits)
  10. Tumblr: how blogging should be (687 recent visits)

Similar Entries

Stats

102 unique visits since August 2008

Syndicate

Advertisements