How can I conditionally format my HTML table?
There are two problems :
1) You miss first <tr> and last </tr> and also must wrap your trs in table tag .
2) Change :
document.getElementByClass('metric') ;
To:
document.getElementsByClassName('metric') ;
var tb = document.getElementsByClassName('metric') ;
console.log(tb) ;<table>
<tr>
<td class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
</tr>
<tr class='detail-hide'><td Class='result-name '>pmu: COMMITTED_PKT_BSB</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1655.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1836.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1655.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1836.0</td>
</tr>
</table>the only problem with your code is you are using wrong js context to search for class using js.
document.getElementByClass('metric')
as classes can be more then 1 so the context to select class is having elements instead of element like below It should be Elements(Plural) not Element(Singular)
document.getElementsByClass('metric')
hope this will solve your query.
if need any other help, just comment here I will try to solve
The method is wrong - you want to use document.getElementsByClassName:
var tb = document.getElementByClass("metric");
You could also use querySelectorAll to only get td elements with the class metric:
var tb = document.querySelectorAll("td.metric");