Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как заполнить двухмерный массив произвольными номерами цветов (рандомно) (https://javascript.ru/forum/events/71224-kak-zapolnit-dvukhmernyjj-massiv-proizvolnymi-nomerami-cvetov-randomno.html)

рони 04.11.2017 18:57

Цитата:

Сообщение от Tungusv
Цвет мне нужен в цифрах и буквах и чтоб во 2м массиве было тожечто и в 1м толк. отсор

пост №19 строка 29 заменить
td.textContent = parseInt(color, 16);

на
td.textContent = "#" + color;


копировать внимательно код, перед копированием обновлять страницу желательно, возможны изменения.

Tungusv 04.11.2017 19:05

второй массив не появляется
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>Document</title>
</head>
<body>
  <style>
  td{height: 30px; width: 80px; text-align: center;}
  </style>
  <script>
function createTable(row, col, parent){
   var table = document.createElement('table'), mas = [];
   for (var i=0; i<row; i++)  {
     var tr = table.insertRow(i); mas[i] = [];
     for (var j=0; j< col; j++)  {
         var td = tr.insertCell(j);
         var color = ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
         td.textContent = "#" + color;
         mas[i].push(color);
   }
   }
  parent.appendChild(table);
  return mas;
}
var body  =  document.body;
var tbl = createTable(2, 9, body);
var new_mas = mas.map(function(ar) {
return ar.sort(function(a,b) {
return parseInt(a, 16) - parseInt(b, 16)
})
})
console.log(new_mas);
createTable(2, 9, body, new_mas);
  </script>
  </body>
</html>

рони 04.11.2017 19:34

Цитата:

Сообщение от рони
второй массив не появляется

а с чего ему появится?

Цитата:

Сообщение от рони
копировать внимательно код, перед копированием обновлять страницу желательно, возможны изменения.


рони 04.11.2017 19:36

Сортировка массива по строкам или столбцам и вывод результата в таблицу
 
Tungusv,
<!DOCTYPE HTML>

<html>

<head>
  <title></title>
  <meta charset="utf-8">
<style type="text/css">
td{
   height: 22px; width: 80px; text-align: center;
}
table{
  margin: 20px auto;
}

</style>
</head>

<body >

<script>
function createTable(row, col, parent, masColor) {
    var table = document.createElement("table"),
        arr = [];
    for (var i = 0; i < row; i++) {
        var tr = table.insertRow(i);
        arr[i] = [];
        for (var j = 0; j < col; j++) {
            var td = tr.insertCell(j);
            var color = masColor ? masColor[i][j] : ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
            td.style.backgroundColor = "#" + color;
            td.textContent = "#" + color;
            arr[i].push(color)
        }
    }
    parent.appendChild(table);
    return arr
}
var body = document.body;
/* создание массива*/
var mas = createTable(3, 8, body);
console.log(mas);

/* сортировка массива по строкам возрастание*/
var new_mas_row = mas.map(function(ar) {
    return ar.slice(0).sort(function(a, b) {
        return parseInt(a, 16) - parseInt(b, 16)
    })
});
console.log(new_mas_row);
createTable(3, 8, body, new_mas_row);

/* сортировка массива по столбцам возрастание*/
var new_mas_col = mas[0].map(function(ar, k) {
    ar = [ar];
    for (var i = 1; i < mas.length; i++) ar.push(mas[i][k]);
    return ar.sort(function(a, b) {
        return parseInt(a, 16) - parseInt(b, 16)
    })
}).reduce(function(a, b) {
    return a.map(function(el, i) {
        return [].concat(el, b[i])
    })
});
console.log(new_mas_col);
createTable(3, 8, body, new_mas_col);

</script>
</body>

</html>

Tungusv 07.11.2017 19:18

сортировка 2 массива по столбцам (убывание).
 
как сделать что б 3 й массив был 2м без изменения(сортировку по убыванию поправил)?
В каком месте искать?
function createTable(row, col, parent, masColor) {
    var table = document.createElement("table"),arr = [];
    for (var i = 0; i < row; i++) {
        var tr = table.insertRow(i);
        arr[i] = [];
        for (var j = 0; j < col; j++) {

            var td = tr.insertCell(j);
            var color = masColor ? masColor[i][j] : ("000000" + (Math.random() * 16777215 |0).toString(16)).slice(-6);
            td.style.backgroundColor = "#" + color;
            td.textContent = "#" + color;
            arr[i].push(color)
        }
    }
    parent.appendChild(table);
    return arr
}
var body = document.body;
/* создание массива*/
var mas = createTable(2, 9, body);
console.log(mas);
/* сортировка массива по строкам возрастание*/
var new_mas_row = mas.map(function(ar) {
    return ar.slice(0).sort(function(a, b) {
        return parseInt(a, 16) - parseInt(b, 16)
    })
});
console.log(new_mas_row);
createTable(2, 9, body, new_mas_row);

 
/* сортировка массива по столбцам убывание*/
var new_mas_col = mas[0].map(function(ar, k) {
    ar = [ar];
    for (var i = 1; i < mas.length; i++) ar.push(mas[i][k]);
    return ar.sort(function(a, b) {
        return parseInt(b, 16) - parseInt(a, 16)
    })
}).reduce(function(a, b) {
    return a.map(function(el, i) {
        return [].concat(el, b[i])
    })
});
console.log(new_mas_col);
createTable(2, 9, body, new_mas_col);

рони 07.11.2017 19:54

Tungusv,
не понимаю, что вы спросили.

Tungusv 07.11.2017 20:00

Как сделать чтоб 3й массив был 2м только отсортированным?
 
сейчас в 3м массиве данные из 2го отсортированные и переставленные относительно столбцов.

рони 07.11.2017 20:11

Tungusv,
поменять mаs на new_mas_row
var new_mas_col = *!*new_mas_row[0].slice(0)*/!*.map(function(ar, k) {
    ar = [ar];
    for (var i = 1; i < *!*new_mas_row*/!*.length; i++) ar.push(*!*new_mas_row*/!*[i][k]);
    return ar.sort(function(a, b) {
        return parseInt(b, 16) - parseInt(a, 16)
    })
}).reduce(function(a, b) {
    return a.map(function(el, i) {
        return [].concat(el, b[i])
    })
});

рони 07.11.2017 20:18

Tungusv,
<!DOCTYPE html>

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


</head>

<body>

 <script>
function createTable(row, col, parent, masColor) {
    var table = document.createElement("table"),arr = [];
    for (var i = 0; i < row; i++) {
        var tr = table.insertRow(i);
        arr[i] = [];
        for (var j = 0; j < col; j++) {

            var td = tr.insertCell(j);
            var color = masColor ? masColor[i][j] : ("000000" + (Math.random() * 16777215 |0).toString(16)).slice(-6);
            td.style.backgroundColor = "#" + color;
            td.textContent = "#" + color;
            arr[i].push(color)
        }
    }
    parent.appendChild(table);
    return arr
}
var body = document.body;
/* создание массива*/
var mas = createTable(2, 9, body);
console.log(mas);
/* сортировка массива по строкам возрастание*/
var new_mas_row = mas.slice(0).map(function(ar) {
    return ar.slice(0).sort(function(a, b) {
        return parseInt(a, 16) - parseInt(b, 16)
    })
});
console.log(new_mas_row);
createTable(2, 9, body, new_mas_row);


/* сортировка массива по столбцам убывание*/
var new_mas_col = new_mas_row[0].slice(0).map(function(ar, k) {
    ar = [ar];
    for (var i = 1; i < new_mas_row.length; i++) ar.push(new_mas_row[i][k]);
    return ar.sort(function(a, b) {
        return parseInt(b, 16) - parseInt(a, 16)
    })
}).reduce(function(a, b) {
    return a.map(function(el, i) {
        return [].concat(el, b[i])
    })
});
console.log(new_mas_col);
createTable(2, 9, body, new_mas_col);

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


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