Forums
Home Product Q&A Discussion groups Articles Ask a question Search
Learning
Events

Forums

Articles
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

conflunce html macro

Ming Ho
Ming Ho
Contributor
April 1, 2016

i used a html macro to display a static table. A small piece of javascript is used to highlight the rows depending on table values. this works well on the preview screen. however, in the actual view, color highlight is no where to be found. does anybody know what is going on here?

below is my code in html macro:

<html>
<head>
<script type="text/javascript">

$(document).ready(function(){
$('#report td.status').each(function(){
if ($(this).text() == 'failed')

{ $(this).css('background-color','red'); }

if ($(this).text() == 'passed')

{ $(this).css('background-color','green'); }

});
});

</script>

</head>
<body>

<table id="report">
<tr><th>Builds</th><th>Status</th></tr>
<tr><td>1</td><td class="status">failed</td></tr>
<tr><td>2</td><td class="status">passed</td></tr>
<tr><td>3</td><td class="status">passed</td></tr>
<tr><td>4</td><td class="status">failed</td></tr>
</table>

</body>
</html>

Answer
Watch
Like Steven F Behnke likes this
377 views

1 answer

1 vote
Steven F Behnke
Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
April 1, 2016

This alternative works. Please note – 

  • Use AJS.toInit instead of document.ready
  • Use AJS.$ instead of $
  • Don't place <head>, <body>, or <html> tags in the macro

 

&lt;script type="text/javascript"&gt;
AJS.toInit(function(){
  $('#report td.status').each(function(){
    if ($(this).text() == 'failed') { 
      AJS.$(this).css('background-color','red'); 
    } else if (AJS.$(this).text() == 'passed') { 
      AJS.$(this).css('background-color','green'); 
    }
  });
});
&lt;/script&gt;
&lt;table id="report"&gt;
  &lt;tr&gt;
    &lt;th&gt;Builds&lt;/th&gt;
    &lt;th&gt;Status&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td class="status"&gt;failed&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td class="status"&gt;passed&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td class="status"&gt;passed&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td class="status"&gt;failed&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
Reply

Suggest an answer

Log in or Sign up to answer
Confluence
Confluence
TAGS
AUG Leaders

Atlassian Community Events

    See all events
    Community
    Forums
    FAQs Forums guidelines
    Learning
    About learning Resources
    Events
    Copyright © 2025 Atlassian
    Privacy Policy Terms Security
    Welcome illustration

    Welcome to the new Atlassian Community

    Online forums and learning are now in one easy-to-use experience.

    By continuing, you accept the updated Community Terms of Use and acknowledge the Privacy Policy. Your public name, photo, and achievements may be publicly visible and available in search engines.