Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как раскрасить 6 рандомных квадратов из таблицы (https://javascript.ru/forum/misc/74326-kak-raskrasit-6-randomnykh-kvadratov-iz-tablicy.html)

Роман1479 01.07.2018 21:31
Как раскрасить 6 рандомных квадратов из таблицы
 
Мне нужно что-бы у меня в таблице (10 на 10) разукрасились n рандомных квадратов. Помогите пожалуйста, буду очень благодарен:) :) 
<div id="table"></div>


function generateTable(row, column){
        var table = '<table>';
        for(var i=1;i<=row;i++){
            table += '<tr>';
            for(var j=1;j<=column; j++){
                table += '<td>' + i + ':' + j + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        document.getElementById('table').innerHTML = table;
    }
    generateTable(10,10);

рони 01.07.2018 21:44
Роман1479,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<div id="table"></div>
<script>
function generateTable(row, column){
        var table = '<table>';
        for(var i=1;i<=row;i++){
            table += '<tr>';
            for(var j=1;j<=column; j++){
                table += '<td>' + i + ':' + j + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        document.getElementById('table').innerHTML = table;
    }
    generateTable(10,10);
function getColor() {
      return "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
    }
var td=[].slice.call(document.querySelectorAll('td'),0), n = 6;
for (var i = 0; i < n; i++) {
var k = Math.random() * td.length|0;
k = td.splice(k,1)[0];
k.style.backgroundColor = getColor();

}


  </script>
</body>
</html>

j0hnik 01.07.2018 22:11 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="table"></div>
<script>

function generateTable(row, column){
        var table = '<table>';
        for(var i=1;i<=row;i++){
            table += '<tr>';
            for(var j=1;j<=column; j++){
                table += '<td>' + i + ':' + j + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        document.getElementById('table').innerHTML = table;
    }
    generateTable(10,10);

[...document.querySelectorAll('td')].sort(_=>Math.random() - 0.5).slice(0,6).forEach(el=>el.style.backgroundColor='red');

  </script>
</body>
</html>

Роман1479 01.07.2018 22:22
Работает, спасибо большое:dance:

рони 02.07.2018 00:34
Роман1479,
var td=[].slice.call(document.querySelectorAll('td'),0),//создали массив из ячеек

 n = 6;
for (var i = 0; i < n; i++) {//цикл n раз
var k = Math.random() * td.length|0; // сгенерировали случайный индекс, td.length всегда разная, меньше чем была
k = td.splice(k,1)[0];// выкусили из массива одну ячейку  по индексу, массив td стал меньше на один элемент, мы физическки не  можем выбрать одну и туже ячейку второй раз
k.style.backgroundColor = "#000000";  //установили стиль выбранной ячейке
}

Alexandroppolus 02.07.2018 01:00
рони,
splice перемещает все элементы массива после удаляемого. Лучше перекидывать последний элемент на его место, и уменьшать длину массива на 1

рони 02.07.2018 01:11
Alexandroppolus,
так?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<div id="table"></div>
<script>
function generateTable(row, column){
        var table = '<table>';
        for(var i=1;i<=row;i++){
            table += '<tr>';
            for(var j=1;j<=column; j++){
                table += '<td>' + i + ':' + j + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        document.getElementById('table').innerHTML = table;
    }
    generateTable(10,10);
function getColor() {
      return "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
    }
var td=[].slice.call(document.querySelectorAll('td'),0), n = 6;
for (var i = 0; i < n; i++) {
var k = Math.random() * td.length|0,
el = td[k];
td[k] = td.pop();
td[k] == el && td.length--;
el.style.backgroundColor = getColor();

}


  </script>
</body>
</html>


Часовой пояс GMT +3, время: 17:27.