<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

<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

• javascript
• html
• arrays
• string

• 4 document.getElementsByClassName("metric") – Jack Bashford Commented Mar 7, 2019 at 4:13

3 Answers 3

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

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>