Tough Random color with restriction

I am trying my luck here to learn from each other how to solve this.

1) 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 would like to first have 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) and unfilled 'r' spots + rest of unfilled box random (19,34,17,42,102 each different color)

There should be no unfilled color.

Thank you

<tableid="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><tdclass="twentyNine">x</td><tdclass="twentyNine">x</td><tdclass="twentyNine">x</td><tdclass="thirty">x</td><tdclass="thirty">x</td><tdclass="thirty">x</td><tdclass="thirty-one">x</td><tdclass="thirty-one">x</td><tdclass="thirty-one">x</td>

</tr><tr><tdclass="twentyNine">x</td><tdclass="twentyNine">x</td><tdclass="twentyNine">x</td><tdclass="thirty">x</td><tdclass="thirty">x</td><tdclass="thirty">x</td><tdclass="thirty-one">x</td><tdclass="thirty-one">x</td><tdclass="thirty-one">x</td>


</tr><tr>

<tdclass="twentyNine">r</td><tdclass="twentyNine">r</td><tdclass="twentyNine">r</td><tdclass="thirty">r</td><tdclass="thirty">r</td><tdclass="thirty">r</td><tdclass="thirty-one">r</td><tdclass="thirty-one">r</td><tdclass="thirty-one">r</td>


</tr></tbody></table><buttononclick=initTblColors()>Random Test</button>

<scripttype="text/javascript">

var tblColors =[];Number.prototype.random =function(){returnMath.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 boxesvar noOfBox =29;// user can change 29 ,30, 31

function initTblColors(){

if(noOfBox ==29){// $(".twentyNine").removeClass("twentyNine");

}elseif(noOfBox ==30){
$(".twentyNine").removeClass("twentyNine");
$(".thirty").removeClass("thirty");

}elseif(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

varColorRemainWithoutBlack= parseInt(spans.length)-12;

for(var i =0; i < spans.length; i++){
spans.style.backgroundColor = tblColors;}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 fixedvar cnt2 =34;// value is generated, not fixedvar cnt3 =17;// value is generated, not fixedvar cnt4 =42;// value is generated, not fixedvar cnt5 =102;// value is generated, not fixedfor(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>

Code (markup):

 

Hi,
Thank you for your reply.

Sorry, i do not know how to use jsfiddle, will meddle with it, unsure how to edit and send link, and where to see the errors after running the codes.

https://jsfiddle.net/e4rcorzd/

The color are appearing but not what i wanted and some box are not filled.

For testing purpose, I hardcoded the value to each variable.
Originally, there are input box where user key in the values and
document.getElementById('textbox_id').value get the value for each noOfBox,cnt,cnt2,cnt3,cnt4,cnt5

var noOfBox = 31; // can be 29,30,31 , if 31 total number of <td> cell is 31x9 = 279

var cnt = 19;
var cnt2 = 34;
var cnt3 = 17;
var cnt4 = 42;
var cnt5 = 102;

I stuck on random color generation with restriction

I need intake only td with no class and ignore all td with class, to get total number of boxes.
(noOfBox == 29) This part of code will toggle the class.
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 would like to first have 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)
and unfilled 'r' spots + rest of unfilled box random fill with 19 lightblue,34 lime,17yellow,42pink,102green(they will be randomly place when refresh browser or click generate button)

 

I don't understand your idea as a whole but check what i got:

var noOfBox = 30,
   table = document.getElementById('tbl'),
   allTds = table.getElementsByTagName('td'),
   twentyNine = table.querySelectorAll('.twentyNine'),
   thirty = table.querySelectorAll('.thirty'),
   thirtyOne = table.querySelectorAll('.thirty-one');

function removeClass(classArr) {
  for (var i = 0; i <= classArr.length - 1; i++) {
    classArr[i].className = "";
  }
}

function initTblColors() {
  if (noOfBox === 29) {
    removeClass(twentyNine);
  } else if (noOfBox === 30) {
    removeClass(twentyNine);
    removeClass(thirty);
  } else if (noOfBox === 31) {
    removeClass(twentyNine);
    removeClass(thirty);
    removeClass(thirtyOne);
  }
}

document.getElementById('randBtn').onclick = function() {
  initTblColors();
}

Code (markup):

You can get number of tds when divide number of all tds to number of all tds with a class:

var table = document.getElementById('tbl'),
   allTds = table.getElementsByTagName('td'),
   twentyNine = table.querySelectorAll('.twentyNine'),
   thirty = table.querySelectorAll('.thirty'),
   thirtyOne = table.querySelectorAll('.thirty-one');

var numberTdsNoClass = allTds.length - (twentyNine.length + thirty.length + thirtyOne.length);

Code (markup):

Or

function numberNoClass() {
  var i, allTdNoClass = 0;
  for (i = 0; i <= allTds.length - 1; i = i + 1) {
    if (allTds[i].className !== "") { continue; }
    allTdNoClass += 1;
  }
  return allTdNoClass;
}
alert(numberNoClass());

Code (markup):