I want to iterate the Table using .childNodes, then find the <B> tag. My code doesn't work!

Question

  <tr class="rowData">
    <td style="padding: 0pt;">
                <table><tr>
                <td>
                    <b style="font-size: 15px; color: silver;">Mugging</b>
                    <br />Payout: <b style="color: green;">$200 - $300</b>
                    <br />Experience: +1                                    </td>

                <td style="text-align: right;">
                                    </td>
            </tr></table>
        </td>
        <td style="padding: 0pt;">
            <table><tr>
                <td style="width: 100px;">
                    <b style="color: gray;">Required:</b>

                    <br />Energy:&nbsp;1                                    </td>
                <td style="">
                                    </td>
            </tr></table>
        </td>

        </td>
  </tr>

I removed some part of it..

Here's some part of the Javascript code:

var jobs = {};

jobs.scan = function() {
    var tagHolder = {};
    var availJobs = {};
    var jobContents = dom.get("app8743457343_content");
    var rData = dom.getElementsByClass("rowData", jobContents, "tr");
    for(var i = 0; i < rData.length; i++) {
        var rChildren = rData[i].childNodes;
        for(var j=0; j<rChildren.length; j++) {
            if(rChildren[j].tagName === 'B') {
                alert(rChildren[j]);
            }
        }
    }
}

jobs.scan();

When I started the script it didn't alert, or responded. Maybe I need to use something to like nextSibling? Please help me figure this out.. I want the b with the style color silver. The Mugging text

Answer 1

Or, you could try jQuery , It's fun and easy, and all the cool kids are doing it!

var text = $('tr.rowData').find('b').filter(function() {
    return $(this).css('color') == 'silver';
}).text();
alert(text);

Tada!

EDIT : In all seriousness, if you want to do it in raw javascript, this works for me on IE and Firefox:

var text;
var bs = document.getElementsByTagName("b");
for(var x = 0; x < bs.length; x++) {
    if(bs[x].style.color == 'silver') {
        text = bs[x].innerHTML;
        break;
    }
}
alert(text);

It is just grabbing all the bold elements in the document and checking to see which one has a color of silver. This is not super efficient, obviously, and I am not sure of your use case. I do see in your code you are first grabbing a reference to a jobContents element. I am not sure where that is coming from as you didn't post that part of the markup, but if the <b> will end up being inside this element, you can change this line:

var bs = document.getElementsByTagName("b");

To this:

var bs = jobContents.getElementsByTagName("b");

Which will then 1) speed it up, 2) make sure you get what you want.

Good luck.

Answer 2