How do I change alternate row color ( background) in table using for loop

[Naples1966]

I didn't arrive to find the mistake in my script /html to appear the color  alternating, placed in rows of table .

May you help me my jelly, see below , please ? In advance, thank you to help me ..

==> here, I use  "ui page" .

in the box " HTML"

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g2:evaluate var="jvar_inc">
var inc = new GlideRecord('incident');
inc.addActiveQuery();
inc.setCategory('homepage');
inc.query();
</g2:evaluate>


<style>
.fixed_header{
width: 400px;
table-layout: fixed;
border-collapse: collapse;
}

.fixed_header thead {
background: black;
color:#fff;
}

.fixed_header th {
padding: 5px;
text-align: left;
width:200px;
}

.fixed_header td {
padding: 5px;
text-align: left;

}

.odd{background-color: white;}
.even{background-color: gray;}

</style>

<div>
<table class="fixed_header" cellpadding ="4" border="2">
<thead>
<tr>
<th width="150px"><center>Number</center> </th>
<th width="75px"><center>Priority</center> </th>
<th width="150px"><center>State</center> </th>
<th width="200px"><center>Description</center> </th>
</tr>
</thead>
</table>
</div>

<Div >
<g2:scrollable_area height="175px">

<table class="fixed_header" onload="alternate('thetable')">
<tbody id="thetable">
<j2:while test="$[inc.next()]">
<j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
<j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>

<tr>

<td width="150px"><center> <a href="$[jvar_inc_link]" class="linked" style="padding-right:10px;">$[inc.number]</a></center> </td>
<td width="75px"><center> $[inc.priority]</center> </td>
<td width="150px"><center> $[inc.state.getDisplayValue()]</center> </td>
<td width="200px">$[inc.short_description]</td>

</tr>
</j2:while>
</tbody>
</table>
</g2:scrollable_area>
</Div>

<div>
<span>
<a href="$[jvar_inc_list_link]" style="color:blue; padding-left:10px">View all active incidents</a>
</span>
</div>
</j:jelly>

in the box " client Script"

function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}

[JerryJ071847183]

Hi,

Simplyify your code as per option of even and odd as per below example where it is given for color

https://community.servicenow.com/community?id=community_question&sys_id=1ff4cb2ddbd8dbc01dcaf3231f961922

Mark my ANSWER as CORRECT and HELPFUL if it helped

[Naples1966]

hi, Thank you for your answer. As I am the beginner for the script to developp, I tried to set "getrownumber()" ,  instead of "<value>" just after "if". It doesn't work !...

See below my script . Is it correct ?:

var inc = new GlideRecord('incident');

var color; inc.addActiveQuery();

inc.addQuery('priority',1);

//** ROW as a number of line **//

var row = inc.getRowNumber();

if( row % 2 == 0){ Color = 'even'; }

else

{ Color= 'odd'; }

inc.setCategory('homepage');

inc.query();

</g2:evaluate>

<style>
.odd{background-color: white;} 
.even{background-color: gray;} 
</style>

<table class="fixed_header" >
<tbody >
<j2:while test="$[inc.next()]">
<j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
<j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>

<tr class="${color}">
<td ....</td>
</tr>
</j2:while>

</tbody>
</table>