javascript - How can I conditionally format my HTML table? - Stack Overflow

admin管理员组

文章数量:1410730

<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

Share Improve this question Follow edited Mar 7, 2019 at 6:19 Jack Bashford 44.2k1111 gold badges5555 silver badges8282 bronze badges asked Mar 7, 2019 at 4:12 GangaGanga 30522 silver badges1313 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 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>

本文标签： javascriptHow can I conditionally format my HTML tableStack Overflow