Жесткий случайный цвет с ограничением

[manu_ml]

Я пытаюсь здесь поучиться друг у друга, как решить эту проблему.

1) Мне нужно принимать только td без класса и игнорировать все td с классом, чтобы получить общее количество полей, что-то вроде этого, чтобы заменить ниже - var spans = $("#tlb tr:not(.twentyNine .thirty .thirtyOne) td "), вместо var spans = document.getElementById('tbl').getElementsByTagName('td'); но это не работает, и :not не работает, т.е.

Причина этого в том, что я группирую 9 ящиков как 1, например, если тип пользователя 30, поле 31 (9 ящиков) активирует класс, который не отображает ни одного, поэтому я включаю только все td без класса, чтобы исключить поле 31 (9 ящиков), в этом случае spans.length вернет 270 (30x9)

2) черный = 12, красный = 53, голубой = 19, салатовый = 34, желтый = 17, розовый = 42, зелёный = 102;

Я хотел бы сначала иметь 12 черных, фиксированных в ячейке «b», а затем 53 красных, чтобы они были случайными местами только в пределах ячеек «r» (точка «r» - это каждые 3 ряда, первые 15 ячеек) и незаполненных ячеек «r» + остальная незаполненная коробка случайным образом (19,34,17,42,102 каждого цвета)

Не должно быть незаполненного цвета.

Спасибо

<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
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
initTblColors();}</script>

Код (разметка):