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

document.getElementsByClassName("metric")

Jack Bashford
– Jack Bashford

2019-03-07 04:13:03 +00:00
Commented Mar 7, 2019 at 4:13 — Jack Bashford
– Jack Bashford, Commented Mar 7, 2019 at 4:13

Nitin Garg · Accepted Answer · 2020-10-18 14:43:25Z

5

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

edited Oct 18, 2020 at 14:43

answered Mar 7, 2019 at 4:19

Nitin Garg

2622 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ganga Over a year ago

Thanks . And can you please tell me how I can see the content obtained

Nitin Garg Over a year ago

@Ganga you can use console.log(tb); and this will display all the contents in your console window

Nitin Garg Over a year ago

@Ganga hope this will help. or you can also use document.write(tb).innerHTML; to display its content on browser.

Ganga Over a year ago

for (var index = 0; index < tb.length; index++) { document.write(tb[index]).innerHTML; } When I try this I'm getting [object HTML table size Element ]

Ganga Over a year ago

I wanted the inner content

|

Jack Bashford · Accepted Answer · 2019-03-07 04:16:46Z

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

Ehsan · Accepted Answer · 2019-03-07 04:38:10Z

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>

Collectives™ on Stack Overflow

How can I conditionally format my HTML table?

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related