www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to Select Specific Elements

  1. #1
    Join Date
    Apr 2008
    Posts
    35

    How to Select Specific Elements

    I basically have 10 TD tags with the same CSS class and ID (Don't blame me, I didn't code it. It's dynamically generated. ). Is it possible to pick the contents of only 1st and 2nd tag? If so, how?

    So let's say I have this code

    Code:
    <td class="field" id="box">red</td>
    <td class="field" id="box">blue</td>
    <td class="field" id="box">yellow</td>
    <td class="field" id="box">orange</td>
    I want to make it so that JavaScript formats a link on the page to be /new.aspx?element1=red&element2=blue. The link will be in the HREF tag so people won't really notice anything at all.

    Would this be a big hassle to do? I can't really use any javascirpt libraries so would prefer to do it with vanilla JavaScript.

    Any suggestions or advice are greatly appreciated. Thanks!

  2. #2
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780

    resolved

    Tested, works.

    *Please make sure those td's are embedded in <tr> and <table> etc. in the actual HTML, of course (no orphan td's)

    First, the function:

    Code:
    <script>
    <!--//
    
    function GetTDContent(x) {
    
        var cells = document.getElementsByTagName("td");
        var total=cells.length;
        if (x>total-1) {
            alert('Not enough cells were found!');
            return "";
        }
        for (var i=0; i<total; i++) {
            if (i==x) 
            return cells[i].innerHTML;
        }
    }
    
    //-->
    </script>
    Next, code to pull the two cells you wanted and generate your link:

    Code:
    <script>
    <!--//
    var first_cell=GetTDContent(0); // Start at 0 for first cell
    var second_cell=GetTDContent(1);
    document.write("<a href='/new.aspx?element1="+first_cell+"&element2="+second_cell+"'>Click here</a>");
    //-->
    </script>
    The function in the first block of code uses DOM commands to find all TD's and create an object where the first TD is offset 0, and so on. The function includes simple error detection to ensure you can't request an offset greater than the total cells present, otherwise it returns the value of that cell if its offset matches the argument value passed to the function.

    The second block of code calls the function twice, as you wanted to pull the value of the first two cells in your request. I simply passed the offset, starting at 0, for the cell to check. Then I store each return value in a variable and create the anchor tag dynamically including those variables. Hope this works for you.

    -jim
    Last edited by SrWebDeveloper; 07-02-2009 at 02:01 PM. Reason: Added some help on the bottom

  3. #3
    Join Date
    Apr 2008
    Posts
    35
    Wow that's excellent.

    One other quick question.

    What if I change:
    var cells = document.getElementsByTagName("td");

    to:

    var cells = document.getElementByID("box");

    Would it still work? The reason I want to do this is because the entire page is coded in tables, so I'd either have to count by ID, class, or TagName + ID. Also, since there's some commented stuff in the TD tag (auto-generated) will that screw up the innerHTML? Is there a way to retrieve rendered data instead?

    Thank you so much!
    Last edited by agalloch; 07-02-2009 at 02:46 PM.

  4. #4
    Join Date
    May 2008
    Posts
    30
    Each element should have one unique ID per page. In Firefox it will work, but it will fail in IE. .....in reference to getting elements by id.....

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    getElementById, no capital.
    You could use document.getElementsByClassName for the browsers that support it, and a custom one for those that don't.
    Great wit and madness are near allied, and fine a line their bounds divide.

  6. #6
    Join Date
    Apr 2008
    Posts
    35
    Ok excellent, you guys rock!

    What about as far as innerHTML? Is there a way to get the rendered stuff, or exclude html comments?

    Thanks again for all the help!
    Last edited by agalloch; 07-06-2009 at 10:55 AM.

  7. #7
    Join Date
    Feb 2006
    Posts
    198
    innerHTML returns all html within an element ID or className, formatting too. innerText will return text without HTML markup

  8. #8
    Join Date
    Apr 2008
    Posts
    35
    I see.

    I tried innerText, but it added an extra space at the end.

    So then I replaced this:
    return cells[i].innerHTML

    with this:
    return cells[i].innerHTML.replace(/<!--[^(-->)]+-->/g, '');

    And that brings back desirable results. Thanks!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles