How can I conditionally format my HTML table?

Question

<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>

I have a HTML table like above I'm trying to do conditional formatting based on the formula applied on the numbers there I tried this:

var tb = document.getElementByClass('metric')

I could not get those values Any modifications or suggestions are appreciated Thank you

Answer 1

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.get Elements ByClass('metric')

hope this will solve your query.

if need any other help, just comment here I will try to solve

Answer 2

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");

Answer 3

There are two problems :

1) You miss first <tr> and last </tr> and also must wrap your tr s 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>