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

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



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


// 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>

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

Можете ли вы настроить тест на jsfiddle, с которым мы сможем поиграть? Что не работает? Вот моя версия: https://jsfiddle.net/u4nga7so/

Я не совсем понимаю, что вы пытаетесь сделать.

 
function initTblColors() {

if (noOfBox == 29)

Код (разметка): Где устанавливается переменная noOfBox?

Я не понимаю вашу идею в целом, но проверьте, что у меня получилось:

 
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());

Код (разметка): Вы можете получить количество tds, разделив количество всех tds на количество всех tds с классом:

  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); 

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

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

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

Привет, Спасибо за ваш ответ. Извините, я не знаю, как использовать jsfiddle, буду вмешиваться в него, не знаю, как редактировать и отправлять ссылку и где увидеть ошибки после запуска кодов.
https://jsfiddle.net/e4rcorzd/

Цвет появляется, но не тот, который я хотел, и некоторые поля не заполнены.

В целях тестирования я жестко запрограммировал значение каждой переменной.

Первоначально существует поле ввода, в котором пользователь вводит значения и

document.getElementById('textbox_id').value получает значение для каждого noOfBox,cnt,cnt2,cnt3,cnt4,cnt5

вар noOfBox = 31; // может быть 29,30,31, если 31 общее количество ячеек равно 31x9 = 279

вар ЦНТ = 19;

вар cnt2 = 34;

вар cnt3 = 17;

вар cnt4 = 42;

вар cnt5 = 102;

Я остановился на генерации случайных цветов с ограничением.

Мне нужно принимать только td без класса и игнорировать все td с классом, чтобы получить общее количество ящиков.

(noOfBox == 29) Эта часть кода переключает класс.

Причина этого в том, что я группирую 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 зелеными (они будут размещены случайным образом при обновлении браузера или нажатии кнопки «Создать»)