Home/ Questions/Q 819661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T02:20:50+00:00

When my page loads it calls the function like below: <body onLoad=’changeTDNodes()’> And the

  • 0

When my page loads it calls the function like below:

<body onLoad='changeTDNodes()'>

And the code it calls is below:

enter code here


<script src='jquery-1.4.2.min.js' type='text/javascript'></script>

<script>

function changeTDNodes() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});

}

I have the class setup correctly in CSS
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}

But no classes are being changed, whats going on?

Thanks for all your help!

Below is whole page:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'             'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Livermore Readerboard</title>
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>

<script>
$(function() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});

</script>
<style type='text/css'>
#InnerRight {
width: 50% !important;
position: relative !important;
float: left !important;
}
#InnerLeft {
width: 49% !important;
position: relative !important;
float: right !important;
}
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
</style>
</head>
<body>
<div id='InnerLeft'>
<table border=1 cellpading=1 cellspacing=0>
<tr align=right>
<td align=left><b>Split/Skill</b></td>
<td align=center><B>CIQ</b></td>
<td align=center><b>EWT</b></td>
<td align=center><b>Agents Staffed</b></td>
<td align=center><b>Avail</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_video</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_tier</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_video</b></td>
<td align=center class='threshold'><B>60</b></td>
<td align=center><b>10:12</b></td>
<td align=center><b>58</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hsi</b></td>
<td align=center class='threshold'><B>34</b></td>
<td align=center><b>18:15</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hn</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>3:48</b></td>
<td align=center><b>3</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_cdv</b></td>
<td align=center class='threshold'><B>6</b></td>
<td align=center><b>14:53</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>CommOps FieldCare</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
</tr>
</table>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You would be far better off, if possible, using ids on your elements, and then using document.getElementById() (or, better yet, using Dojo, MooTools or JQuery to make your code simpler).

    So your html looks like:

    <td id="cell-repair-video">Repair value is <b>23</b></td>
<td id="cell-ppv">PPV value is <b>5</b></td>

    Then your JavaScript looks like:

    var RepairVideo_cell = document.getElementById("cell-repair-video");
var RepairVideo_value = RepairVideo_cell.getElementsByTagName("b")[0];

    In JQuery (and others), you can easily use a class to determine which elements need thresholding

    In this case, your html looks like:

    <td class="threshold">Repair value is <b>23</b></td>
<td class="threshold">PPV value is <b>5</b></td>

    And your entire JavaScript looks like:

    $(function() {
  var threshValue = 10;
  $('.threshold').each(function(index) {
    var thisValue = parseFloat( $('b', this).text() );
    if(thisValue > threshValue) {
      $(this).addClass('overThreshold');
    }
  });
});

    In your current example, there is an error in your CSS

    To style td and th elements with a classname, go

    td.overThreshold, th.overThreshold {
  background: #F00; /* for example */
}
    • 0