Alternative Table Row Colors
-1
Checked already answered questions but unsuccessful.
I have table populated from database.
How to make alternative color for each group ? such as this
This is the code
<?php
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
?>
<div class="center2">
<div class="datagrid">
<table>
<tr><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div>
<?php ?>
Thank you
P.S.
It's a no problem to create row alternative such as this
But I looking for GROUP by ID
php html
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
add a comment |
-1
Checked already answered questions but unsuccessful.
I have table populated from database.
How to make alternative color for each group ? such as this
This is the code
<?php
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
?>
<div class="center2">
<div class="datagrid">
<table>
<tr><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div>
<?php ?>
Thank you
P.S.
It's a no problem to create row alternative such as this
But I looking for GROUP by ID
php html
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
1
Hey Green_Crocodile! Here on StackOverflow, we help fix problems and offer suggestions based on code you've already produced. Could you show us your current HTML (after output, I'm not sure the PHP is necessary here), CSS, and JavaScript you're using to try to solve this problem?
– Ryan
Nov 15 '18 at 19:02
Please include server side language and basic code structure, html. Thanks
– Edwin Dijas Chiwona
Nov 15 '18 at 19:10
Your tags are Javascript and HTML. Does this mean no CSS?
– Brendon Shaw
Nov 15 '18 at 19:10
add a comment |
-1
-1
-1
Checked already answered questions but unsuccessful.
I have table populated from database.
How to make alternative color for each group ? such as this
This is the code
<?php
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
?>
<div class="center2">
<div class="datagrid">
<table>
<tr><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div>
<?php ?>
Thank you
P.S.
It's a no problem to create row alternative such as this
But I looking for GROUP by ID
php html
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
Checked already answered questions but unsuccessful.
I have table populated from database.
How to make alternative color for each group ? such as this
This is the code
<?php
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
?>
<div class="center2">
<div class="datagrid">
<table>
<tr><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div>
<?php ?>
Thank you
P.S.
It's a no problem to create row alternative such as this
But I looking for GROUP by ID
php html
php html
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
edited Nov 15 '18 at 23:41
lucascaro
3,96611832
3,96611832
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
asked Nov 15 '18 at 18:49
Green_CrocodileGreen_Crocodile
156
156
1
Hey Green_Crocodile! Here on StackOverflow, we help fix problems and offer suggestions based on code you've already produced. Could you show us your current HTML (after output, I'm not sure the PHP is necessary here), CSS, and JavaScript you're using to try to solve this problem?
– Ryan
Nov 15 '18 at 19:02
Please include server side language and basic code structure, html. Thanks
– Edwin Dijas Chiwona
Nov 15 '18 at 19:10
Your tags are Javascript and HTML. Does this mean no CSS?
– Brendon Shaw
Nov 15 '18 at 19:10
add a comment |
1
Hey Green_Crocodile! Here on StackOverflow, we help fix problems and offer suggestions based on code you've already produced. Could you show us your current HTML (after output, I'm not sure the PHP is necessary here), CSS, and JavaScript you're using to try to solve this problem?
– Ryan
Nov 15 '18 at 19:02
Please include server side language and basic code structure, html. Thanks
– Edwin Dijas Chiwona
Nov 15 '18 at 19:10
Your tags are Javascript and HTML. Does this mean no CSS?
– Brendon Shaw
Nov 15 '18 at 19:10
1
1
Hey Green_Crocodile! Here on StackOverflow, we help fix problems and offer suggestions based on code you've already produced. Could you show us your current HTML (after output, I'm not sure the PHP is necessary here), CSS, and JavaScript you're using to try to solve this problem?
– Ryan
Nov 15 '18 at 19:02
Hey Green_Crocodile! Here on StackOverflow, we help fix problems and offer suggestions based on code you've already produced. Could you show us your current HTML (after output, I'm not sure the PHP is necessary here), CSS, and JavaScript you're using to try to solve this problem?
– Ryan
Nov 15 '18 at 19:02
Please include server side language and basic code structure, html. Thanks
– Edwin Dijas Chiwona
Nov 15 '18 at 19:10
Please include server side language and basic code structure, html. Thanks
– Edwin Dijas Chiwona
Nov 15 '18 at 19:10
Your tags are Javascript and HTML. Does this mean no CSS?
– Brendon Shaw
Nov 15 '18 at 19:10
Your tags are Javascript and HTML. Does this mean no CSS?
– Brendon Shaw
Nov 15 '18 at 19:10
add a comment |
3 Answers
3
active
oldest
votes
2
Use css nth child.
For even/odd
Tr:nth-child(even)
Background-color: #446;
For Class
Tr.bg
Background-color: #446;
For more information
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
With PHP alternating based on variable. This code will change class if the first letter changes.
<?php
$first_letter '';
//Change class to true to invert background color
$class = false;
//Warning isn't Category id supposed to be a string is so add quotes
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
//Using shorthand echo <?=
//
// CSS Class Name
$val = (string) trim( strtolower( $rq[category_id] ) ); //Make sure its of string type
//This will set the class to either true or false
//If class is true, the column will have a classname of bg
if( !empty( trim($rq[category_id]) ) && strlen( $val ) > 0 && $first_letter !== $val[0]; )
$class = !$class; //Invert class
$first_letter = $val[0];
?> <div class="center2">
<div class="datagrid">
<table>
<tr class='<?= $class ? 'bg' : null ?>' ><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div><?php
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
1
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
|
show 1 more comment
-1
If you're iterating through the rows with an index, check the value of index % 2 which say's "what's the remainder, if any, of index divided by 2?"
If it equals 0 then set it's class to something like even-row otherwise set it's class to something like odd-row.
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
add a comment |
-1
You can use getElementsByClassName() to get all elements and loop through the returned array, setting the background color on every second element. See below:
<!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html>If you want to use CSS, use nth-child.
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326093%2falternative-table-row-colors%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Use css nth child.
For even/odd
Tr:nth-child(even)
Background-color: #446;
For Class
Tr.bg
Background-color: #446;
For more information
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
With PHP alternating based on variable. This code will change class if the first letter changes.
<?php
$first_letter '';
//Change class to true to invert background color
$class = false;
//Warning isn't Category id supposed to be a string is so add quotes
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
//Using shorthand echo <?=
//
// CSS Class Name
$val = (string) trim( strtolower( $rq[category_id] ) ); //Make sure its of string type
//This will set the class to either true or false
//If class is true, the column will have a classname of bg
if( !empty( trim($rq[category_id]) ) && strlen( $val ) > 0 && $first_letter !== $val[0]; )
$class = !$class; //Invert class
$first_letter = $val[0];
?> <div class="center2">
<div class="datagrid">
<table>
<tr class='<?= $class ? 'bg' : null ?>' ><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div><?php
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
1
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
|
show 1 more comment
2
Use css nth child.
For even/odd
Tr:nth-child(even)
Background-color: #446;
For Class
Tr.bg
Background-color: #446;
For more information
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
With PHP alternating based on variable. This code will change class if the first letter changes.
<?php
$first_letter '';
//Change class to true to invert background color
$class = false;
//Warning isn't Category id supposed to be a string is so add quotes
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
//Using shorthand echo <?=
//
// CSS Class Name
$val = (string) trim( strtolower( $rq[category_id] ) ); //Make sure its of string type
//This will set the class to either true or false
//If class is true, the column will have a classname of bg
if( !empty( trim($rq[category_id]) ) && strlen( $val ) > 0 && $first_letter !== $val[0]; )
$class = !$class; //Invert class
$first_letter = $val[0];
?> <div class="center2">
<div class="datagrid">
<table>
<tr class='<?= $class ? 'bg' : null ?>' ><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div><?php
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
1
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
|
show 1 more comment
2
2
2
Use css nth child.
For even/odd
Tr:nth-child(even)
Background-color: #446;
For Class
Tr.bg
Background-color: #446;
For more information
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
With PHP alternating based on variable. This code will change class if the first letter changes.
<?php
$first_letter '';
//Change class to true to invert background color
$class = false;
//Warning isn't Category id supposed to be a string is so add quotes
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
//Using shorthand echo <?=
//
// CSS Class Name
$val = (string) trim( strtolower( $rq[category_id] ) ); //Make sure its of string type
//This will set the class to either true or false
//If class is true, the column will have a classname of bg
if( !empty( trim($rq[category_id]) ) && strlen( $val ) > 0 && $first_letter !== $val[0]; )
$class = !$class; //Invert class
$first_letter = $val[0];
?> <div class="center2">
<div class="datagrid">
<table>
<tr class='<?= $class ? 'bg' : null ?>' ><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div><?php
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
Use css nth child.
For even/odd
Tr:nth-child(even)
Background-color: #446;
For Class
Tr.bg
Background-color: #446;
For more information
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
With PHP alternating based on variable. This code will change class if the first letter changes.
<?php
$first_letter '';
//Change class to true to invert background color
$class = false;
//Warning isn't Category id supposed to be a string is so add quotes
while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC))
//Using shorthand echo <?=
//
// CSS Class Name
$val = (string) trim( strtolower( $rq[category_id] ) ); //Make sure its of string type
//This will set the class to either true or false
//If class is true, the column will have a classname of bg
if( !empty( trim($rq[category_id]) ) && strlen( $val ) > 0 && $first_letter !== $val[0]; )
$class = !$class; //Invert class
$first_letter = $val[0];
?> <div class="center2">
<div class="datagrid">
<table>
<tr class='<?= $class ? 'bg' : null ?>' ><td> <?php echo $rq[category_id]; ?></td></tr>
</table>
</div>
</div><?php
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
edited Nov 15 '18 at 20:02
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
answered Nov 15 '18 at 19:07
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
35118
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
1
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
|
show 1 more comment
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
1
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
This could work if the alternative color is on every other row. But for this question, it seems that it's for each row with a different starting character, which is a variable number of rows.
– Ryan
Nov 15 '18 at 19:13
1
1
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
Then add more detail to the question! If it's server side you can add a class to the table row. If it's static data you will need to add class after the page loads.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:15
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
I definitely don't disagree with you here - I've already asked for clarification on this question above! I'm just guessing based on the image, honestly.
– Ryan
Nov 15 '18 at 19:16
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
this is a code <?php while ( $rq = sqlsrv_fetch_array( $result_N, SQLSRV_FETCH_ASSOC)) ?> <div class="center2"> <div class="datagrid"> <table> <tr><td> <?php echo $rq[category_id]; ?></td></tr> </table> </div> </div> <?php ?>
– Green_Crocodile
Nov 15 '18 at 19:26
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
Let me edit thr answer.
– Edwin Dijas Chiwona
Nov 15 '18 at 19:29
|
show 1 more comment
-1
If you're iterating through the rows with an index, check the value of index % 2 which say's "what's the remainder, if any, of index divided by 2?"
If it equals 0 then set it's class to something like even-row otherwise set it's class to something like odd-row.
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
add a comment |
-1
If you're iterating through the rows with an index, check the value of index % 2 which say's "what's the remainder, if any, of index divided by 2?"
If it equals 0 then set it's class to something like even-row otherwise set it's class to something like odd-row.
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
add a comment |
-1
-1
-1
If you're iterating through the rows with an index, check the value of index % 2 which say's "what's the remainder, if any, of index divided by 2?"
If it equals 0 then set it's class to something like even-row otherwise set it's class to something like odd-row.
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
If you're iterating through the rows with an index, check the value of index % 2 which say's "what's the remainder, if any, of index divided by 2?"
If it equals 0 then set it's class to something like even-row otherwise set it's class to something like odd-row.
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
answered Nov 15 '18 at 19:02
Erik WithakErik Withak
125
125
add a comment |
add a comment |
-1
You can use getElementsByClassName() to get all elements and loop through the returned array, setting the background color on every second element. See below:
<!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html>If you want to use CSS, use nth-child.
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
add a comment |
-1
You can use getElementsByClassName() to get all elements and loop through the returned array, setting the background color on every second element. See below:
<!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html>If you want to use CSS, use nth-child.
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
add a comment |
-1
-1
-1
You can use getElementsByClassName() to get all elements and loop through the returned array, setting the background color on every second element. See below:
<!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html>If you want to use CSS, use nth-child.
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
You can use getElementsByClassName() to get all elements and loop through the returned array, setting the background color on every second element. See below:
<!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html>If you want to use CSS, use nth-child.
<!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html><!DOCTYPE HTML>
<html>
<body>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
<p class="row">A Row</p>
</body>
<script>
const rows = document.getElementsByClassName('row');
for (i=0;i<rows.length;i+=2)
rows[i].style.backgroundColor = "blue";
</script>
</html>answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
edited Nov 15 '18 at 19:20
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
answered Nov 15 '18 at 19:14
Brendon ShawBrendon Shaw
115316
115316
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
add a comment |
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
No I need different. I need color by group.
– Green_Crocodile
Nov 15 '18 at 19:30
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
@Green_Crocodile If you can change your code into just HTML I can help you.
– Brendon Shaw
Nov 15 '18 at 23:03
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326093%2falternative-table-row-colors%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Hey Green_Crocodile! Here on StackOverflow, we help fix problems and offer suggestions based on code you've already produced. Could you show us your current HTML (after output, I'm not sure the PHP is necessary here), CSS, and JavaScript you're using to try to solve this problem?
– Ryan
Nov 15 '18 at 19:02
Please include server side language and basic code structure, html. Thanks
– Edwin Dijas Chiwona
Nov 15 '18 at 19:10
Your tags are Javascript and HTML. Does this mean no CSS?
– Brendon Shaw
Nov 15 '18 at 19:10