Hy, I want to make different colors every single time the page has called or opened and with the couple set I've made at the table with the different personalisation of rows color. How do I make it true ??? This line of the CSS code I've try to achieves to make some goals :
I do try with the Math methode to get random some colors but I'd stuck with it. because it won't personalisation of couple set of colors. See the code I've made with javascript at the below this :
---------------------------------------------------------- GS -----------------------------------------------------------------
function randomColor(customColorsArray, takenColorsArray) {
var text = "",
colors = ["orange", "yellow", "red", "maroon"];
if (customColorsArray && takenColorsArray) {
var text = "["+colors+"]";
}
else if (!customColorsArray && !takenColorsArray) {
text += colors[Math.floor(Math.random() * colors.length)];
}
else {
text += customColorsArray[Math.floor(Math.random() * customColorsArray.length)];
};
return text;
}
function personalRandomColor(e, customColor1, customColor2, customColor3, customColor4) {
var text = "";
if (!customColor1) {
if (e == "orange") {text += "white";}
else if (e == "red") {text += "blue";}
else if (e == "yellow") {text += "magenta";}
else if (e == "maroon") {text += "almond";};
} else {
if (e == "orange") {text += customColor1;}
else if (e == "yellow") {text += customColor2;}
else if (e == "red") {text += customColor3;}
else if (e == "maroon") {text += customColor4;};
};
return text;
}
function showTable() {
var s = SpreadsheetApp,
ss = s.getActiveSpreadsheet(),
sss = ss.getSheets(),
Html = HtmlService.createHtmlOutput(result)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(545)
.setHeight(500),
customColorsArrays = randomColor('passingClass', 'takenColor'),
randomFirstColor = 'yellow',
skipFirstColor = customColorsArrays.replace('yellow,', ''),
randomSecondColor = randomColor(toString(skipFirstColors)),
result = "<head>
<style type='text/css'>
.gridview {
display: inline-block;
border-collapse: collapse;
margin: 0px 4px 4px 0;
box-shadow: 3px 3px 4px #bbb;
}
.gridview, .gridview td {
margin: 0;
border: 1px solid #cccccc;
}
.gridview tr:nth-child(even) {
background-color: "+randomFirstColor+";
}
.gridview tr:nth-child(odd) {
background-color: "+randomSecondColor+";
}
.gridview td {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
.gridview td {
padding: 4px 10px 5px 9px;
}
</style>
</head>
<table border=1 class='gridview'>";
for (var i = 0; i < sss.length; i++) {
result += "<tr>";
result += "<td>" + sss[i].getName() + "</td>";
result += "</tr>";
}
result += "</table>";
ss.toast(customColorsArrays+" & "+skipFirstColors+" & "+randomSecondColor, "Output Test", 50);
ss.show(Html.setTitle("Show the Table at PopUp"));}
}
What I want is if the table have reloaded always shows the different colors of rows everytime the page has opened and it must be set with my personalisation I've set. Please, have a look to personalRandomColor() function In this case I would like such as Orange just for nth-child(odd) and White for nth-child(even) at the First Random Open and Red for nth-child(odd) and Blue for nth-child(even) at the Second Random Open and that's so on ... and on ... and on again and again and always again but with the condition of skipping the first colors !!!
Try this:
var colors = ["#ccff99", "#e6ffb3", "#dfff80", "#ffffcc", "#ffff99", "#ffe6ff", "#ffcccc", "#ffcc99", "#ffe6b3", "#fff0b3"];
$(document).ready({
var randomFirstColor = rando(colors);//grab a random color
colors.splice(randomFirstColor.index, 1);//remove color from array so we don't risk picking it again. you can remove this line if you don't care whether the second color is the same as the first
$(".gridview tr:nth-child(odd)").css({backgroundColor: randomFirstColor.value});//style odd rows
$(".gridview tr:nth-child(even)").css({backgroundColor: rando(colors).value});//style even rows
});
You just have to import Randojs and jQuery by pasting the following in the head tag of your html document:
<script src="https://randojs.com/1.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
OR, to exclude jQuery, try:
var colors = ["#ccff99", "#e6ffb3", "#dfff80", "#ffffcc", "#ffff99", "#ffe6ff", "#ffcccc", "#ffcc99", "#ffe6b3", "#fff0b3"];
$(window).on("load", function(){
var randomFirstColor = rando(colors);//grab a random color
colors.splice(randomFirstColor.index, 1);//remove color from array so we don't risk picking it again. you can remove this line if you don't care whether the second color is the same as the first
var randomSecondColor = rando(colors);//grab another random color
var gridviews = document.getElementsByClassName("gridview");
for(var i = 0; i < gridviews.length; i++){//for each gridview...
var rows = gridviews[i].getElementsByTagName("tr");
for(var j = 0; j < rows.length; j++){//for each row in the gridview...
if(j % 2 == 0){
//style even
rows[j].style.backgroundColor = randomFirstColor.value;
}
else{
//style odd
rows[j].style.backgroundColor = randomSecondColor.value;
}
}
}
});
You just have to import Randojs by pasting the following in the head tag of your html document:
<script src="https://randojs.com/1.0.0.js"></script>
Now that you've updated your post, I can see a problem with your code. You are assigning a string to the "result" variable, but you are breaking that string across multiple lines, like this:
var result = "example
of
bad
formatting";
You should be beginning and ending the quote on each line and adding a plus sign between them to join them together, like so:
var result = "example" +
"of" +
"good" +
"formatting";
Once you get that fixed, make sure you put the html-string you've made into an element on the page and THEN call the random row color code I've given you.