I have the HTML code below:

<div id="CMSoutput">
<p>
<TABLE BORDER=1 CELLPADDING=1 CELLSPACING=0>
<TR>
<TH><B>Split/Skill</B></TH>
<TH><B>CIQ</B></TH>
<TH><B>EWT</B></TH>
<TH><B>Agents Staffed</B></TH>
<TH><B>Avail</B></TH>
<TH><B>% SVL</B></TH>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>PPV</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>:00</B></TD>
<TD ALIGN=CENTER><B>42</B></TD>
<TD ALIGN=CENTER><B>23</B></TD>
<TD ALIGN=CENTER><B>100.00</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>LEAD_IP_REP_video</B></TD>
<TD ALIGN=CENTER><B>1</B></TD>
<TD ALIGN=CENTER><B>1:52</B></TD>
<TD ALIGN=CENTER><B>4</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>15.36</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>LEAD_IP_REP_tier</B></TD>
<TD ALIGN=CENTER><B>3</B></TD>
<TD ALIGN=CENTER><B>4:24</B></TD>
<TD ALIGN=CENTER><B>4</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>15.90</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>IP_REP_video</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>:00</B></TD>
<TD ALIGN=CENTER><B>74</B></TD>
<TD ALIGN=CENTER><B>4</B></TD>
<TD ALIGN=CENTER><B>66.85</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>IP_REP_hsi</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>:00</B></TD>
<TD ALIGN=CENTER><B>73</B></TD>
<TD ALIGN=CENTER><B>3</B></TD>
<TD ALIGN=CENTER><B>61.36</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>IP_REP_hn</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>:00</B></TD>
<TD ALIGN=CENTER><B>2</B></TD>
<TD ALIGN=CENTER><B>1</B></TD>
<TD ALIGN=CENTER><B>18.75</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>IP_REP_cdv</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>:00</B></TD>
<TD ALIGN=CENTER><B>73</B></TD>
<TD ALIGN=CENTER><B>3</B></TD>
<TD ALIGN=CENTER><B>72.31</B></TD>
</TR>
<TR ALIGN=RIGHT>
<TD ALIGN=LEFT><B>CommOps FieldCare</B></TD>
<TD ALIGN=CENTER><B>&nbsp;</B></TD>
<TD ALIGN=CENTER><B>:00</B></TD>
<TD ALIGN=CENTER><B>5</B></TD>
<TD ALIGN=CENTER><B>1</B></TD>
<TD ALIGN=CENTER><B>62.64</B></TD>
</TR>
</TABLE>
</p>
</div>

The code that is between the<p> </p> I can't change as it's automatically inserted from a program. Everything outside, like the div=CMSoutput I can change. I'm trying to learn DOM traversing on the fly and I'm stuck.

I want a function that onload finds the first td after

<TD ALIGN=LEFT><B>LEAD_IP_REP_tier</B></TD>

So in the above case I want the below TD found. <TD ALIGN=CENTER><B>3</B></TD>

Then I want to edit it's attributes. If it's greater than 2, I want the bgcolor=red and fontcolor=white.

I hope this is clear, and I appreciate all the help I can get.

Thank you so much!

  • Oh and if it involves using jquery that is fine as well. But I would prefer not. Andrew Madison over 6 years ago
  • If you want someone to help you with your code then you should post it. Nathan Duran over 6 years ago

1 answer

2
points
This was chosen as the best answer

Aha! Found it!

function changeTDNodes() {

// there can be many "tr" elements; just return the first/zeroth element var mycurrent_cell = document.getElementsByTagName("td")[7];

// change the cell if value greater than 2 var ciq = mycurrent_cell.innerHTML; if (ciq>2) {

`mycurrent_cell.setAttribute("bgColor","red");`

} } </script>

Answered over 6 years ago by Andrew Madison
  • It's probably worth investing to demand proper input from 3rd parties, above HTML really doesnt feel good. Roland Franssen over 6 years ago