Playing with Table cell color

@kikiwhoMar 21.2016

I create a 30 cell table

0000000
0000000
0000000
0000000
00

using date function I am able to get the day and date.

I am assuming first day(1st) is match with first cell , I will first mark out saturday, so its 6,13,20,27, give it a color black.

00000×0
00000×0
00000×0
00000×0
00

with above mark out, I remain 26 cell (30 – 4) I have 5 color (red,blue,green,yellow,pink) red – 3 (a fixed number) blue – 4(a fixed number) green – 5(a fixed number) yellow – 6(a fixed number) pink – 8(a fixed number)

I have to random these 26 color to fit the remaining boxes

What is the correct way to achieve this?

to post a comment

JavaScript

18 Comments(s) _↴

@JMRKERMar 21.2016 — #One (of many) possible ways to achieve this...

[code=php]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 
 </head>
 <body>
 <table id="tbl" border='1'>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 </table>
 
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 // From: http://www.codingforums.com/javascript-programming/375801-playing-table-cell-color.html
 var tblColors = ['red','red','red',
 'blue','blue','blue','blue',
 'green','green','green','green','green',
 'yellow','yellow','yellow','yellow','yellow','yellow',
 'pink','pink','pink','pink','pink','pink','pink','pink',
 'black','black','black','black'
 ];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 function initTblColors() {
 var sel = document.getElementById('tbl').getElementsByTagName('td');
 for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var i=0; i<26; i++) {
 rc = (26).random();
 tc1 = sel[i].style.backgroundColor;
 tc2 = sel[rc].style.backgroundColor;
 sel[rc].style.backgroundColor = tc1;
 sel[i].style.backgroundColor = tc2;
 }
 var sat = [5,12,19];  // sat list
 for (var i=0; i<sat.length; i++) {
 rc = sat[i];
 tc1 = sel[rc].style.backgroundColor;
 tc2 = sel[27+i].style.backgroundColor;
 sel[27+i].style.backgroundColor = tc1;
 sel[rc].style.backgroundColor = tc2;
 
 }
 }
 initTblColors()
 </script>
 
 </body>
 </html>
 [/code]

@kikiwhoauthorMar 22.2016 — #One (of many) possible ways to achieve this...

[code=php]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 
 </head>
 <body>
 <table id="tbl" border='1'>
 <tr>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 </tr>
 <tr>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 </tr>
 <tr>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 </tr>
 <tr>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 <td>*</td>
 </tr>
 <tr>
 <td>*</td>
 <td>*</td>
 </tr>
 </table>
 
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 // From: http://www.codingforums.com/javascript-programming/375801-playing-table-cell-color.html
 var tblColors = ['red','red','red',
 'blue','blue','blue','blue',
 'green','green','green','green','green',
 'yellow','yellow','yellow','yellow','yellow','yellow',
 'pink','pink','pink','pink','pink','pink','pink','pink',
 'black','black','black','black'
 ];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 function initTblColors() {
 var sel = document.getElementById('tbl').getElementsByTagName('td');
 for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var i=0; i<26; i++) {
 rc = (26).random();
 tc1 = sel[i].style.backgroundColor;
 tc2 = sel[rc].style.backgroundColor;
 sel[rc].style.backgroundColor = tc1;
 sel[i].style.backgroundColor = tc2;
 }
 var sat = [5,12,19];  // sat list
 for (var i=0; i<sat.length; i++) {
 rc = sat[i];
 tc1 = sel[rc].style.backgroundColor;
 tc2 = sel[27+i].style.backgroundColor;
 sel[27+i].style.backgroundColor = tc1;
 sel[rc].style.backgroundColor = tc2;
 
 }
 }
 initTblColors()
 </script>
 
 </body>
 </html>
 [/code]

[/QUOTE]

Hi JMRKER

Thank you very much.

For the tblColors array , is it possible to use variable(contains a digit generated elsewhere where) instead of hardcoding.

For example : var redAmt = 3;

var tblColors = [ 'red' = redAmt,'blue' ]

@JMRKERMar 22.2016 — #Hi JMRKER

Thank you very much.

For the tblColors array , is it possible to use variable(contains a digit generated elsewhere where) instead of hardcoding.

For example : var redAmt = 3;

var tblColors = [ 'red' = redAmt,'blue' ][/QUOTE]

Yes, it might be possible to use a variable, but not the way you proposed.

My main questions is why? What is the purpose of the change request?

What is it that you are really trying to accomplish?

Or how does the change work with some other (un-specified) requirement?

@kikiwhoauthorMar 22.2016 — #Yes, it might be possible to use a variable, but not the way you proposed.

My main questions is why? What is the purpose of the change request?

What is it that you are really trying to accomplish?

Or how does the change work with some other (un-specified) requirement?[/QUOTE]

Hi JMRKER

Thanks for your reply. Thank you for aiding in my understanding.

I am using calander monday to sunday to explain , instead of 1 to 7 to avoid confusion.

What I am trying to achieve

Please enter number of boxes : <input type="text" id="boxAmt" />

boxAmt is enter by user , how many boxes he want, can be 29 or 30.

Please enter number of red: <input type="text" id="redAmt" />

Please enter number of blue: <input type="text" id="blueAmt" />

same for yellow, green

Again user type the amount

The 5 different color add up to boxAmt.

By default, let say user want 30 box, 4 were block out (saturday column), remaining 26 box

this is DONE.

OOOOOxO

OOOOOxO

OOOOOxO

OOOOOxO

OO

1) Please enter number of blue : <input type="text" id="blueAmt" />

For blue, it is restricted to random between monday to thursday row

****OxO

****OxO

****OxO

****OxO

OO

* is blue,

let say user type 5 blue, it appear anywhere 5 out of 16 *.

To achieve question 1, how do i modify saturday code, hardcode in the position of mon to thur, randomize within these 16 position and show only "blueAmt".

2) The rest unfilled box , 30-4(sat)-5(blueAmt) = 21

other 4 color to be random in this 21 box

3) Lastly there a export button. I use a table as I would like to export to excel.

Hopefully the colors and value of each cell is exported successfully.

My excel codes are not working in internet explorer.

Thank you

@JMRKERMar 22.2016 — #A few more questions.

1. The user only enters numbers for the red and blue colors? Are the other 3 are randomly assigned based upon the number of open cells left? Is the user allowed to enter 0 (zero) as the number cells of a particular color to display?

2. What if the user enters more numbers (1 to 5 color values) than there are cells left? Or more that will allow any some or none of the extra random colors?

3. Javascript will not export directly to Excel. Do you wish to create a CSV or text file to import into Excel? What is the format of the Excel file you wish to create?

3) Lastly there a export button. I use a table as I would like to export to excel.

Hopefully the colors and value of each cell is exported successfully.

My excel codes are not working in internet explorer.
[/quote]
What do you mean by the colors and value of each cell? If you pass the color, what is the value of the cell? If you pass the value, what is the color? Or how does the value differ from the color of the cell when pasted to the Excel work page.

As you can see, there is not much use in creating a script until all the variables are defined. You should take more time with that logic of the program than actual coding.

I think I understand what you want displayed (maybe) but I am still confused about the purpose. What does the days of the week (0...6) have to do with your position requirement of the table display of 1 to 30? And what about 31 days in some of the months? Is the last day ignored in this case?

Note: Arrays in JS are referenced from 0 [zero] to the number of cells. You can call the cells anything you desire (1 to 30 or 101 to 130 or whatever), but the easier way to reference a cell within the program is from 0 to 29, especially for calculation and display purposes.

@rootMar 23.2016 — #If you are going to be pasting this in to Excel, why are you not creating this in Excel in the first place?

@kikiwhoauthorMar 23.2016 — #If you are going to be pasting this in to Excel, why are you not creating this in Excel in the first place?[/QUOTE]

Hello,

originally I am using excel, but would like to play around and learn with web and its also more user friendly.

@kikiwhoauthorMar 23.2016 — #A few more questions.

2. What if the user enters more numbers (1 to 5 color values) than there are cells left? Or more that will allow any some or none of the extra random colors?

3. Javascript will not export directly to Excel. Do you wish to create a CSV or text file to import into Excel? What is the format of the Excel file you wish to create?

What do you mean by the colors and value of each cell? If you pass the color, what is the value of the cell? If you pass the value, what is the color? Or how does the value differ from the color of the cell when pasted to the Excel work page.

As you can see, there is not much use in creating a script until all the variables are defined. You should take more time with that logic of the program than actual coding.

I think I understand what you want displayed (maybe) but I am still confused about the purpose. What does the days of the week (0...6) have to do with your position requirement of the table display of 1 to 30? And what about 31 days in some of the months? Is the last day ignored in this case?

Note: Arrays in JS are referenced from 0 [zero] to the number of cells. You can call the cells anything you desire (1 to 30 or 101 to 130 or whatever), but the easier way to reference a cell within the program is from 0 to 29, especially for calculation and display purposes.[/QUOTE]

Hi,

Thank you very much for your reply.

1. The user enter number for each of the colors

red : 3

blue : 6

yellow : 8

green : 7

The number type by the user for each colors can be random but total number of color add up = number of boxes

User can enter 0, so other color will have more, but total number of color add up = number of boxes

2. I have validation that target and retrieve the input value to ensure add up match to the number of boxes, then the random generating of color begin

3) The excel is just for local copy, exact same output as web output for the table.

That why I have issue using client javascript export for internet explorer, If not csv would be fine as to show the individual cell colored?

4)What do you mean by the colors and value of each cell? If you pass the color, what is the value of the cell? If you pass the value, what is the color? Or how does the value differ from the color of the cell when pasted to the Excel work page.

I am referring to the color of the cell able to export and reflected in the excel accordingly.

Originally, If after each box are colored and randomly place accordingly, hopefully I could insert a text based on each color, for example all black color show the text "this is black", text with background color.

5) Since the number of box is not fixed too, can be 29 or sometime can be 30,

if 29 boxes, total color = total box amount is 29/

30 will be left out, no coloring

Actually,I am just working on 30 boxes, there will be some more boxes inside each boxes let say 6 (this amount is fixed , not user type in). Total is 180 boxes.

But I just start small, get the logic code for 30 box working first

I would have 180 colors and 180 box in this case.

I would have 6 boxes in 1 day.

6 box x 30 = 180 total box

Saturday column would be block out.

mon to friday column will be fixed , and a color will random within this fixed column

unfilled mon to friday column + unfilled rest of box , the other 4 colors will be random.

Thank you

@Ay__351_eMar 23.2016 — #

 
 &lt;!DOCTYPE html&gt; 
 &lt;html lang="en"&gt; 
 &lt;head&gt; 
 &lt;meta charset="UTF-8" /&gt; 
 
 &lt;title&gt; Random Cell Colors &lt;/title&gt; 
 &lt;style type="text/css"&gt; 
 td { width:1em; } 
 /* td:nth-child(6){background-color: black} */
 #ad { font-size:30px; width:600px;}
 &lt;/style&gt; 
 
 &lt;/head&gt; 
 &lt;body&gt; 
 &lt;table id="tablo" border='1'&gt; 
 &lt;tr&gt; 
 &lt;th&gt;pazartesi&lt;/th&gt; 
 &lt;th&gt;sal&amp;#305;&lt;/th&gt; 
 &lt;th&gt;çar&amp;#351;amba&lt;/th&gt; 
 &lt;th&gt;per&amp;#351;embe&lt;/th&gt; 
 &lt;th&gt;cuma&lt;/th&gt; 
 &lt;th&gt;cumartesi&lt;/th&gt; 
 &lt;th&gt;pazar&lt;/th&gt; 
 &lt;/tr&gt;
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;/table&gt; 
 
 &lt;p&gt;&lt;label style="color:lime;"&gt;&lt;button onclick=start()&gt;Random Test&lt;/button&gt;&lt;/p&gt;
 
 
 &lt;p&gt;&lt;label style="color:#b08;"&gt;boya(&lt;label style="color:red"&gt;numberOfRed&lt;/label&gt;,&lt;label style="color:blue"&gt;numberOfBlue&lt;/label&gt;,&lt;label style="color:green"&gt;numberOfGreen&lt;/label&gt;,&lt;label style="color:yellow"&gt;numberOfYellow&lt;/label&gt;,&lt;label style="color:pink"&gt;numberOfPink&lt;/label&gt;,&lt;label style="color:black"&gt;numberOfBlack,numberOfBox)&lt;/label&gt;&lt;/p&gt;
 
 &lt;p&gt;&lt;input type="text" id="ad" value="boya(3,4,5,6,8,4,30)" &gt;&lt;/p&gt;
 
 
 &lt;script type="text/javascript"&gt; 
 //Bu kodda  sadece siyah ve mavi olan alanlar boyand&amp;#305;.
 Number.prototype.random = function() { return Math.floor(Math.random() * this); } 
 
 function boya(r,b,g,y,p,bl,box){ 
 var el = document.getElementById('tablo').getElementsByTagName('td'); 
 var i, B=[], D=[];
 for(i=0, c = 5; i&lt;box; i++){ 
 if( (i%7)== 5){  el[i].style.backgroundColor = "black";  }  // cumartesi sütununu siyah renkli yapal&amp;#305;m.
 if( (i%7)!= 5){  B[B.length]=i;  } // cumartesi olmayan sütunlardaki kutular&amp;#305; diziye alal&amp;#305;m
 if( (i%7) &lt; 4) {D[D.length]=i; } // ilk 4 sütüna mavi renk yerle&amp;#351;tirilecek. Bu sütunlardaki kutular&amp;#305;n numaralar&amp;#305;n&amp;#305; bir dizide toplad&amp;#305;k.
 }
 //alert(D);
 // mavi rengi kutulara ata
 var n;
 for(i=0; i&lt; b; i++){
 n = (D.length-1).random(); // rastgele bir say&amp;#305; elde et 
 el[ D[n] ].style.backgroundColor="blue"; // kutuya renk ata
 // http://www.w3schools.com/jsref/jsref_splice.asp
 
 alert( "n= "+n+"   nD= "+D+ "   nD[n]= "+D[n] + "n D.length= "+D.length);
 D.splice(n,1);
 
 }
 
 
 var i, toplam=0;
 var L = arguments.length;
 for(i=0; i&lt; (L-1); i++){
 toplam = toplam +arguments[i];
 }
 // alert(i);
 if(toplam != arguments[i]){ 
 //alert(" renklerin say&amp;#305;s&amp;#305;n&amp;#305;n toplam&amp;#305; != kutular&amp;#305;n say&amp;#305;s&amp;#305;"); 
 }
 if(toplam == arguments[i]){ 
 //alert(" renklerin say&amp;#305;s&amp;#305;n&amp;#305;n toplam&amp;#305; = kutular&amp;#305;n say&amp;#305;s&amp;#305;"); 
 }
 }
 
 
 
 function start(){
 var ad= document.getElementById('ad');
 Function(ad.value)();
 }
 
 &lt;/script&gt; 
 &lt;/body&gt; 
 &lt;/html&gt;

@kikiwhoauthorMar 24.2016 — #

 
 &lt;!DOCTYPE html&gt; 
 &lt;html lang="en"&gt; 
 &lt;head&gt; 
 &lt;meta charset="UTF-8" /&gt; 
 
 &lt;title&gt; Random Cell Colors &lt;/title&gt; 
 &lt;style type="text/css"&gt; 
 td { width:1em; } 
 /* td:nth-child(6){background-color: black} */
 #ad { font-size:30px; width:600px;}
 &lt;/style&gt; 
 
 &lt;/head&gt; 
 &lt;body&gt; 
 &lt;table id="tablo" border='1'&gt; 
 &lt;tr&gt; 
 &lt;th&gt;pazartesi&lt;/th&gt; 
 &lt;th&gt;sal&amp;#305;&lt;/th&gt; 
 &lt;th&gt;çar&amp;#351;amba&lt;/th&gt; 
 &lt;th&gt;per&amp;#351;embe&lt;/th&gt; 
 &lt;th&gt;cuma&lt;/th&gt; 
 &lt;th&gt;cumartesi&lt;/th&gt; 
 &lt;th&gt;pazar&lt;/th&gt; 
 &lt;/tr&gt;
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;td&gt;*&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;/table&gt; 
 
 &lt;p&gt;&lt;label style="color:lime;"&gt;&lt;button onclick=start()&gt;Random Test&lt;/button&gt;&lt;/p&gt;
 
 
 &lt;p&gt;&lt;label style="color:#b08;"&gt;boya(&lt;label style="color:red"&gt;numberOfRed&lt;/label&gt;,&lt;label style="color:blue"&gt;numberOfBlue&lt;/label&gt;,&lt;label style="color:green"&gt;numberOfGreen&lt;/label&gt;,&lt;label style="color:yellow"&gt;numberOfYellow&lt;/label&gt;,&lt;label style="color:pink"&gt;numberOfPink&lt;/label&gt;,&lt;label style="color:black"&gt;numberOfBlack,numberOfBox)&lt;/label&gt;&lt;/p&gt;
 
 &lt;p&gt;&lt;input type="text" id="ad" value="boya(3,4,5,6,8,4,30)" &gt;&lt;/p&gt;
 
 
 &lt;script type="text/javascript"&gt; 
 //Bu kodda  sadece siyah ve mavi olan alanlar boyand&amp;#305;.
 Number.prototype.random = function() { return Math.floor(Math.random() * this); } 
 
 function boya(r,b,g,y,p,bl,box){ 
 var el = document.getElementById('tablo').getElementsByTagName('td'); 
 var i, B=[], D=[];
 for(i=0, c = 5; i&lt;box; i++){ 
 if( (i%7)== 5){  el[i].style.backgroundColor = "black";  }  // cumartesi sütununu siyah renkli yapal&amp;#305;m.
 if( (i%7)!= 5){  B[B.length]=i;  } // cumartesi olmayan sütunlardaki kutular&amp;#305; diziye alal&amp;#305;m
 if( (i%7) &lt; 4) {D[D.length]=i; } // ilk 4 sütüna mavi renk yerle&amp;#351;tirilecek. Bu sütunlardaki kutular&amp;#305;n numaralar&amp;#305;n&amp;#305; bir dizide toplad&amp;#305;k.
 }
 //alert(D);
 // mavi rengi kutulara ata
 var n;
 for(i=0; i&lt; b; i++){
 n = (D.length-1).random(); // rastgele bir say&amp;#305; elde et 
 el[ D[n] ].style.backgroundColor="blue"; // kutuya renk ata
 // http://www.w3schools.com/jsref/jsref_splice.asp
 
 alert( "n= "+n+"   nD= "+D+ "   nD[n]= "+D[n] + "n D.length= "+D.length);
 D.splice(n,1);
 
 }
 
 
 var i, toplam=0;
 var L = arguments.length;
 for(i=0; i&lt; (L-1); i++){
 toplam = toplam +arguments[i];
 }
 // alert(i);
 if(toplam != arguments[i]){ 
 //alert(" renklerin say&amp;#305;s&amp;#305;n&amp;#305;n toplam&amp;#305; != kutular&amp;#305;n say&amp;#305;s&amp;#305;"); 
 }
 if(toplam == arguments[i]){ 
 //alert(" renklerin say&amp;#305;s&amp;#305;n&amp;#305;n toplam&amp;#305; = kutular&amp;#305;n say&amp;#305;s&amp;#305;"); 
 }
 }
 
 
 
 function start(){
 var ad= document.getElementById('ad');
 Function(ad.value)();
 }
 
 &lt;/script&gt; 
 &lt;/body&gt; 
 &lt;/html&gt;

[/QUOTE]

Hi,

Thanks for your reply.

Not quite what I am looking for, it keep alerting, have to keep clicking the button and only generating blue 1 at a time

@JMRKERMar 24.2016 — #No conversion to Excel in this version but is this heading in the right direction for your query?

[code=php]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 </head>
 
 <body>
 Enter amounts to total of 26<br>
 <div id="cAmounts" style="width:25%">
 <div style="float:left">
 <input id="cRed" type="text" value="3" size="2"> Red <br>
 <input id="cBlue" type="text" value="4" size="2"> Blue <br>
 <input id="cGreen" type="text" value="5" size="2"> Green <br>
 </div>
 <div style="float:right">
 <input id="cYellow" type="text" value="6" size="2"> Yellow <br>
 <input id="cPink" type="text" value="8" size="2"> Pink <br>
 <input id="cTotals" type="text" value="" size="2" readonly>
 <button onclick="summate()"> Total </button>
 </div>
 </div>
 <br style="clear:both"> <p>
 
 <table id="tbl" border='1'>
 <tr>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 </tr>
 <tr>
 <tr>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 </table>
 
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 // From: http://www.codingforums.com/javascript-programming/375801-playing-table-cell-color.html
 
 var tblColors = [];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 function initTblColors() {
 var sel = document.getElementById('tbl').getElementsByTagName('td');
 for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var i=0; i<26; i++) {
 rc = (26).random();
 tc1 = sel[i].style.backgroundColor;
 tc2 = sel[rc].style.backgroundColor;
 sel[rc].style.backgroundColor = tc1;
 sel[i].style.backgroundColor = tc2;
 }
 var sat = [5,12,19];  // sat list
 for (var i=0; i<sat.length; i++) {
 rc = sat[i];
 tc1 = sel[rc].style.backgroundColor;
 tc2 = sel[27+i].style.backgroundColor;
 sel[27+i].style.backgroundColor = tc1;
 sel[rc].style.backgroundColor = tc2;
 
 }
 } summate();  // initTblColors();
 
 function summate() {
 var sel = document.getElementById('cAmounts').getElementsByTagName('input');
 var sum = 0;
 for (var i=0; i<sel.length-1; i++) { sum += sel[i].value * 1; }
 document.getElementById('cTotals').value = sum;
 if (sum != 26) { alert('Invalid Total'); return; }
 
 var colorPicks = ['red','lightblue','lime','yellow','pink'];  // or ['red','blue','green','yellow','pink']
 tblColors.length = 0;
 var cnt;
 for (var i=0; i<sel.length-1; i++) {
 cnt = sel[i].value * 1;
 for (var j=0; j<cnt; j++) {
 tblColors.push(colorPicks[i]);
 }
 }
 for (var i=0; i<4; i++) { tblColors.push('black'); }
 initTblColors();
 }
 </script>
 
 </body>
 </html> 
 [/code]

@kikiwhoauthorMar 24.2016 — #No conversion to Excel in this version but is this heading in the right direction for your query?

[code=php]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 </head>
 
 <body>
 Enter amounts to total of 26<br>
 <div id="cAmounts" style="width:25%">
 <div style="float:left">
 <input id="cRed" type="text" value="3" size="2"> Red <br>
 <input id="cBlue" type="text" value="4" size="2"> Blue <br>
 <input id="cGreen" type="text" value="5" size="2"> Green <br>
 </div>
 <div style="float:right">
 <input id="cYellow" type="text" value="6" size="2"> Yellow <br>
 <input id="cPink" type="text" value="8" size="2"> Pink <br>
 <input id="cTotals" type="text" value="" size="2" readonly>
 <button onclick="summate()"> Total </button>
 </div>
 </div>
 <br style="clear:both"> <p>
 
 <table id="tbl" border='1'>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <td>*</td>
 <td>*</td>
 </tr>
 </table>
 
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 // From: http://www.codingforums.com/javascript-programming/375801-playing-table-cell-color.html
 
 var tblColors = [];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 function initTblColors() {
 var sel = document.getElementById('tbl').getElementsByTagName('td');
 for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var i=0; i<26; i++) {
 rc = (26).random();
 tc1 = sel[i].style.backgroundColor;
 tc2 = sel[rc].style.backgroundColor;
 sel[rc].style.backgroundColor = tc1;
 sel[i].style.backgroundColor = tc2;
 }
 var sat = [5,12,19];  // sat list
 for (var i=0; i<sat.length; i++) {
 rc = sat[i];
 tc1 = sel[rc].style.backgroundColor;
 tc2 = sel[27+i].style.backgroundColor;
 sel[27+i].style.backgroundColor = tc1;
 sel[rc].style.backgroundColor = tc2;
 
 }
 } summate();  // initTblColors();
 
 function summate() {
 var sel = document.getElementById('cAmounts').getElementsByTagName('input');
 var sum = 0;
 for (var i=0; i<sel.length-1; i++) { sum += sel[i].value * 1; }
 document.getElementById('cTotals').value = sum;
 if (sum != 26) { alert('Invalid Total'); return; }
 
 var colorPicks = ['red','lightblue','lime','yellow','pink'];  // or ['red','blue','green','yellow','pink']
 tblColors.length = 0;
 var cnt;
 for (var i=0; i<sel.length-1; i++) {
 cnt = sel[i].value * 1;
 for (var j=0; j<cnt; j++) {
 tblColors.push(colorPicks[i]);
 }
 }
 for (var i=0; i<4; i++) { tblColors.push('black'); }
 initTblColors();
 }
 </script>
 
 </body>
 </html> 
 [/code]

See what you can come up with concerning the conversion as I still do not completely understand your requirements about this topic. Relates to the purpose (which I am still confused about) of the script or it's intended usage. ?[/QUOTE]

Hi,

Thank you for your reply, appreciate it very much.

let me try converse what you have done. Some questions while i am attemting it at same time now.

1) in my case the total number of box is 30, what if the total number of color = total number of box is 29, does it mean 1 will left out without colors? As td is hardcoded fixed at 30

2) 30 box = 4 saturday cell block out

180 box = 24 saturday cell block out

For my case, if there are 180 boxes,

For adjusting the black color to block out, i adjust this 2 paragragh?

for (var i=0; i<26; i++) { //IF I GOT 24 BLACK out of 180 , SO change 26 to 156?

rc = (26).random(); // like wise here change 26 to 156?

tc1 = sel[i].style.backgroundColor;

tc2 = sel[rc].style.backgroundColor;

sel[rc].style.backgroundColor = tc1;

sel[i].style.backgroundColor = tc2;

}

var sat = [5,12,19]; // here I add 24 array value based on where saturday is located

for (var i=0; i<sat.length; i++) {

rc = sat[i];

tc1 = sel[rc].style.backgroundColor;

tc2 = sel[27+i].style.backgroundColor; // HERE I CHANGE TO 157+i

sel[27+i].style.backgroundColor = tc1; / HERE I CHANGE TO 157+i

sel[rc].style.backgroundColor = tc2;

}

3) with saturday done,

mon to thurs column will be fixed , and a color will random within this fixed column

there are 3 red,

these 3 red to be random color restricted to * spot.

x = saturday

r = red

**r*0x0

*r**0x0

****0x0

**r*0x0

**

r can be anywhere within *.

how do I modify the saturday code for this red function?

with the red done, the remaining 'lightblue','lime','yellow','pink' filled the rest uncolored box.

@kikiwhoauthorMar 27.2016 — #No conversion to Excel in this version but is this heading in the right direction for your query?

[code=php]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 </head>
 
 <body>
 Enter amounts to total of 26<br>
 <div id="cAmounts" style="width:25%">
 <div style="float:left">
 <input id="cRed" type="text" value="3" size="2"> Red <br>
 <input id="cBlue" type="text" value="4" size="2"> Blue <br>
 <input id="cGreen" type="text" value="5" size="2"> Green <br>
 </div>
 <div style="float:right">
 <input id="cYellow" type="text" value="6" size="2"> Yellow <br>
 <input id="cPink" type="text" value="8" size="2"> Pink <br>
 <input id="cTotals" type="text" value="" size="2" readonly>
 <button onclick="summate()"> Total </button>
 </div>
 </div>
 <br style="clear:both"> <p>
 
 <table id="tbl" border='1'>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <td>*</td>  <td>*</td>  <td>*</td>  <td>*</td>
 <td>*</td>  <td>*</td>  <td>*</td>
 </tr>
 <tr>
 <td>*</td>
 <td>*</td>
 </tr>
 </table>
 
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 // From: http://www.codingforums.com/javascript-programming/375801-playing-table-cell-color.html
 
 var tblColors = [];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 function initTblColors() {
 var sel = document.getElementById('tbl').getElementsByTagName('td');
 for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var i=0; i<26; i++) {
 rc = (26).random();
 tc1 = sel[i].style.backgroundColor;
 tc2 = sel[rc].style.backgroundColor;
 sel[rc].style.backgroundColor = tc1;
 sel[i].style.backgroundColor = tc2;
 }
 var sat = [5,12,19];  // sat list
 for (var i=0; i<sat.length; i++) {
 rc = sat[i];
 tc1 = sel[rc].style.backgroundColor;
 tc2 = sel[27+i].style.backgroundColor;
 sel[27+i].style.backgroundColor = tc1;
 sel[rc].style.backgroundColor = tc2;
 
 }
 } summate();  // initTblColors();
 
 function summate() {
 var sel = document.getElementById('cAmounts').getElementsByTagName('input');
 var sum = 0;
 for (var i=0; i<sel.length-1; i++) { sum += sel[i].value * 1; }
 document.getElementById('cTotals').value = sum;
 if (sum != 26) { alert('Invalid Total'); return; }
 
 var colorPicks = ['red','lightblue','lime','yellow','pink'];  // or ['red','blue','green','yellow','pink']
 tblColors.length = 0;
 var cnt;
 for (var i=0; i<sel.length-1; i++) {
 cnt = sel[i].value * 1;
 for (var j=0; j<cnt; j++) {
 tblColors.push(colorPicks[i]);
 }
 }
 for (var i=0; i<4; i++) { tblColors.push('black'); }
 initTblColors();
 }
 </script>
 
 </body>
 </html> 
 [/code]

See what you can come up with concerning the conversion as I still do not completely understand your requirements about this topic. Relates to the purpose (which I am still confused about) of the script or it's intended usage. ?[/QUOTE]

Hi JMRKER,

I am making progress, able to detect number of boxes out of total which i want to random.

My 12 black boxes does not stay put and

upon pressing button, it appear random black amount but

refreshing page appear 12

Is it possible for red to be random within selected spot and the rest colors filled the whole box?

Is there a way I can send you my file to have a look?

Thank you.

@kikiwhoauthorMar 27.2016 — #Hi Guys,

I have clean up and uploaded here instead. I am almost there with the results.

1) Fixed 12 black on "b" spot

2) 53 red, to be generated within only the 'r' spots ('r' spot is every 3 row, first 15 box)

3) unfilled 'r' spots + rest of unfilled box random (19,34,17,42,102 each different color)

53,19,34,17,42,102 are values in variable, could be change sometime down the road next time but total in final will be matching total box.

total box is variable too, could be change sometime down the road next time, can be 261(29x9), 270(30x9), 279(31x9).

double check (for reference only)

12 + 53 + 19 + 34 + 17 + 42 + 102 = 279 total boxes (31x9) just nice.

[CODE]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 </head>
 
 <body>
 
 <table id="tbl" border='1'> 

 <tbody>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 
 <tr>
 
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td class="twentyNine">x</td>
 <td class="twentyNine">x</td>
 <td class="twentyNine">x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 
 </tr>
 <tr>
 <td class="twentyNine">x</td>
 <td class="twentyNine" >x</td>
 <td class="twentyNine" >x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 
 
 </tr>
 <tr>
 
  <td class="twentyNine" >r</td>
   <td class="twentyNine" >r</td>
  <td class="twentyNine" >r</td>
  <td class="thirty">r</td>
   <td class="thirty">r</td>
  <td class="thirty">r</td>
  <td class="thirty-one">r</td>
   <td class="thirty-one">r</td>
  <td class="thirty-one">r</td>
 
 
 </tr>
 </tbody></table>
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 
 var tblColors = [];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 var sat = [17,34,51,68,85,103,120,137,154,171,188,205];  // fixed spot - 12 black block out
 
 // as the number of boxes increase, I treat 9 boxes as 1, so in this case there are 31 boxes, total 31 x 9 = 279 boxes
 var noOfBox = 29; // user can change 29 ,30, 31 
 
 function initTblColors() {
 
 if (noOfBox == 29)
 {
 // $(".twentyNine").removeClass("twentyNine");
 
 }else if (noOfBox == 30)
 {
 $(".twentyNine").removeClass("twentyNine");
 $(".thirty").removeClass("thirty");
 
 }else if (noOfBox == 31)
 {
 $(".twentyNine").removeClass("twentyNine");
 $(".thirty").removeClass("thirty");
 $(".thirty-one").removeClass("thirty-one");
 
 }
 
 var spans =  document.getElementById('tbl').getElementsByTagName('td');  // Unsure what to type here , I  want it to target all td with no class name of tbl label
 
 var ColorRemainWithoutBlack = parseInt(spans.length) - 12;
 
 for (var i = 0; i < spans.length; i++) {
 spans[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var j=0; j<ColorRemainWithoutBlack; j++) {
 rc = (ColorRemainWithoutBlack).random();
 tc1 = spans[j].style.backgroundColor;
 tc2 = spans[rc].style.backgroundColor;
 spans[rc].style.backgroundColor = tc1;
 spans[j].style.backgroundColor = tc2;
 }
 for (var k=0; k<sat.length; k++) {
 rc = sat[k];
 tc1 = spans[rc].style.backgroundColor;
 tc2 = spans[ColorRemainWithoutBlack+1+k].style.backgroundColor;
 spans[ColorRemainWithoutBlack+1+ k].style.backgroundColor = tc1;
 spans[rc].style.backgroundColor = tc2;
 
 }
 
 
   }summate();  // initTblColors();
 
 function summate() {
 var colorPicks = ['red','lightblue','lime','yellow','pink'];  // or ['red','blue','green','yellow','pink']
 tblColors.length = 0;
 var cnt;
 var cnt2;
 var cnt3;
 var cnt4;
 var cnt5;
 
 
 var cnt = 19; // value is generated, not fixed
 var cnt2 = 34;// value is generated, not fixed
 var cnt3 = 17;// value is generated, not fixed
 var cnt4 = 42;// value is generated, not fixed
 var cnt5 = 102;// value is generated, not fixed
 for (var j=0; j<cnt; j++) {
 tblColors.push(colorPicks[0]);
 }
 
  for (var k=0; k<cnt2; k++) {
   tblColors.push(colorPicks[1]);
  }
  for (var j=0; j<cnt3; j++) {
   tblColors.push(colorPicks[2]);
  }
  for (var j=0; j<cnt4; j++) {
   tblColors.push(colorPicks[3]);
  }
  for (var j=0; j<cnt5; j++) {
   tblColors.push(colorPicks[4]);
  }
 
 for (var i=0; i<sat.length; i++) { tblColors.push('black');} // 12 black
 
 
 // remaining 53 red, to be generated within only the 'r' spots
 
 initTblColors();
 } 
 </script>
 
 </body>
 </html>  [/CODE]

@kikiwhoauthorMar 28.2016 — #Hi Guys,

I have clean up and uploaded here instead. I am almost there with the results.

1) Fixed 12 black on "b" spot

2) 53 red, to be generated within only the 'r' spots ('r' spot is every 3 row, first 15 box)

3) unfilled 'r' spots + rest of unfilled box random (19,34,17,42,102 each different color)

53,19,34,17,42,102 are values in variable, could be change sometime down the road next time but total in final will be matching total box.

total box is variable too, could be change sometime down the road next time, can be 261(29x9), 270(30x9), 279(31x9).

double check (for reference only)

12 + 53 + 19 + 34 + 17 + 42 + 102 = 279 total boxes (31x9) just nice.

[CODE]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Random Cell Colors </title>
 <style type="text/css">
 td { width:1em; }
 </style>
 </head>
 
 <body>
 
 <table id="tbl" border='1'> 

 <tbody>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 
 <tr>
 
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 
 </tr>
 <tr>
 
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>r</td>
 <td>x</td>
 <td>x</td>
 <td>b</td>
 <td>x</td>
 <td>x</td>
 <td>x</td>
 </tr>
 <tr>
 <td class="twentyNine">x</td>
 <td class="twentyNine">x</td>
 <td class="twentyNine">x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 
 </tr>
 <tr>
 <td class="twentyNine">x</td>
 <td class="twentyNine" >x</td>
 <td class="twentyNine" >x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 <td class="thirty-one">x</td>
 
 
 </tr>
 <tr>
 
  <td class="twentyNine" >r</td>
   <td class="twentyNine" >r</td>
  <td class="twentyNine" >r</td>
  <td class="thirty">r</td>
   <td class="thirty">r</td>
  <td class="thirty">r</td>
  <td class="thirty-one">r</td>
   <td class="thirty-one">r</td>
  <td class="thirty-one">r</td>
 
 
 </tr>
 </tbody></table>
 <button onclick=initTblColors()>Random Test</button>
 
 <script type="text/javascript">
 
 var tblColors = [];
 Number.prototype.random = function() { return Math.floor(Math.random() * this); }
 
 var sat = [17,34,51,68,85,103,120,137,154,171,188,205];  // fixed spot - 12 black block out
 
 // as the number of boxes increase, I treat 9 boxes as 1, so in this case there are 31 boxes, total 31 x 9 = 279 boxes
 var noOfBox = 29; // user can change 29 ,30, 31 
 
 function initTblColors() {
 
 if (noOfBox == 29)
 {
 // $(".twentyNine").removeClass("twentyNine");
 
 }else if (noOfBox == 30)
 {
 $(".twentyNine").removeClass("twentyNine");
 $(".thirty").removeClass("thirty");
 
 }else if (noOfBox == 31)
 {
 $(".twentyNine").removeClass("twentyNine");
 $(".thirty").removeClass("thirty");
 $(".thirty-one").removeClass("thirty-one");
 
 }
 
 var spans =  document.getElementById('tbl').getElementsByTagName('td');  // Unsure what to type here , I  want it to target all td with no class name of tbl label
 
 var ColorRemainWithoutBlack = parseInt(spans.length) - 12;
 
 for (var i = 0; i < spans.length; i++) {
 spans[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
 for (var j=0; j<ColorRemainWithoutBlack; j++) {
 rc = (ColorRemainWithoutBlack).random();
 tc1 = spans[j].style.backgroundColor;
 tc2 = spans[rc].style.backgroundColor;
 spans[rc].style.backgroundColor = tc1;
 spans[j].style.backgroundColor = tc2;
 }
 for (var k=0; k<sat.length; k++) {
 rc = sat[k];
 tc1 = spans[rc].style.backgroundColor;
 tc2 = spans[ColorRemainWithoutBlack+1+k].style.backgroundColor;
 spans[ColorRemainWithoutBlack+1+ k].style.backgroundColor = tc1;
 spans[rc].style.backgroundColor = tc2;
 
 }
 
 
   }summate();  // initTblColors();
 
 function summate() {
 var colorPicks = ['red','lightblue','lime','yellow','pink'];  // or ['red','blue','green','yellow','pink']
 tblColors.length = 0;
 var cnt;
 var cnt2;
 var cnt3;
 var cnt4;
 var cnt5;
 
 
 var cnt = 19; // value is generated, not fixed
 var cnt2 = 34;// value is generated, not fixed
 var cnt3 = 17;// value is generated, not fixed
 var cnt4 = 42;// value is generated, not fixed
 var cnt5 = 102;// value is generated, not fixed
 for (var j=0; j<cnt; j++) {
 tblColors.push(colorPicks[0]);
 }
 
  for (var k=0; k<cnt2; k++) {
   tblColors.push(colorPicks[1]);
  }
  for (var j=0; j<cnt3; j++) {
   tblColors.push(colorPicks[2]);
  }
  for (var j=0; j<cnt4; j++) {
   tblColors.push(colorPicks[3]);
  }
  for (var j=0; j<cnt5; j++) {
   tblColors.push(colorPicks[4]);
  }
 
 for (var i=0; i<sat.length; i++) { tblColors.push('black');} // 12 black
 
 
 // remaining 53 red, to be generated within only the 'r' spots
 
 initTblColors();
 } 
 </script>
 
 </body>
 </html>  [/CODE]

[/QUOTE]

Need help with this with the result output

@JMRKERMar 28.2016 — #I really don't know what the purpose of this exercise is.

The requirements seem to change every other post between user selected color displays and static displays.

Your displays of 'x', 'r', 'b', etc don't match the background colors assigned.

Until you can tell me what we are trying to accomplish, I'll be out of the loop for awhile.

I'll watch what others suggest if they can understand the problem better.

Sorry, I'm just not good at programming when the requirements are not well defined.

⭕(

@kikiwhoauthorMar 28.2016 — #I really don't know what the purpose of this exercise is.

The requirements seem to change every other post between user selected color displays and static displays.

Your displays of 'x', 'r', 'b', etc don't match the background colors assigned.

Until you can tell me what we are trying to accomplish, I'll be out of the loop for awhile.

I'll watch what others suggest if they can understand the problem better.

Sorry, I'm just not good at programming when the requirements are not well defined.

⭕([/QUOTE]

Hi JMRKER,

Thank you for your reply, really appreciate it.

My apologies to not being able to explain clearly over the computer. Please dont give up on me

It basically there are input boxes and users type a number in each input, and based on the restriction, the color generate and fill up the boxes.

Ignore the previous posts, based the the codes I uploaded is where I left out and the structure is there. For testing wise, I didnt implement the input, instead I hardcoded the numbers to variable. Therefore you might find it different but they are still the same.

From the codes I have uploaded,

1) First I need intake only td with no class and ignore all td with class, to get total number of boxes

something like this to replace below - var spans = $("#tlb tr:not(.twentyNine .thirty .thirtyOne) td"), instead of var spans = document.getElementById('tbl').getElementsByTagName('td'); but it not working, and :not does not work in ie

Reason for this, i group 9 box as 1 , for example if user type 30, box 31(9 boxes) will activate a class which display none, so I only intake all td with no class to exclude box 31(9 boxes), in this case spans.length will return 270 (30x9)

2)

black = 12, red = 53, lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102;

i) Fixed 12 black on "b" spot

ii) 53 red, to be generated within only the 'r' spots ('r' spot is every 3 row, first 15 box)

iii) unfilled 'r' spots + rest of available unfilled 'x' spot - random filled with 19 lightblue, 34 lime, 17 yellow, 42 pink, 102 green

No boxes will be left out unfilled.

@kikiwhoauthorMar 31.2016 — #Still need help in solving the random color generation

Would like

- 12 black fixed on "b" spot

- Followed by 53 red to be random place within only the 'r' spots ('r' spot is every 3 row, first 15 box)

- Unfilled 'r' spots + rest of unfilled box random fill with lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102

There should be no unfilled box

https://jsfiddle.net/e4rcorzd/

Also in #JavaScript _↴

MS toElement UL/LI Menu Problem image mapping running two scrips on form submition

Success!

Help @kikiwho spread the word by sharing this article on Twitter...

Tweet This

Playing with Table cell color

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Playing with Table cell color

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴