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

Question

Hi, I have a problem in my code. I want to get the b tag that has the style color silver using Javascript. I tried using the tagName === "B" but it didn't work. I figured that the B tags are not children of the rowData class.

  <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

You could fight the good fight and try to get that monstrosity working across all browsers....

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

Your code doesn't go down deep enough into the tree. You need at least 4 more levels of childNode "for" loops to get to the "B" tag. If you go this route then you should probably make a recursive function that searches for your "B" tag.