Как заполнить двухмерный массив произвольными номерами цветов (рандомно)
Как заполнить двухмерный массив произвольными номерами цветов (рандомно) и вывести все в html ввиде таблицы?
|
Tungusv,
ваши попытки где? |
var n = 2, m = 9;
var mas = []; for (var i = 0; i < m; i++){ mas[i] = []; for (var j = 0; j < n; j++){ mas[i][j] = 1; }} console.log(mas); |
Tungusv, осталось рандомно определить 3 циферки для RGB определения цвета и присвоить это все к стилю ячейки.
Или ты табличку не умеешь делать скриптом? |
Tungusv,
Добавление и удаление узлов https://javascript.ru/forum/misc/488...tml#post321888
td.style.backgroundColor = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6)
|
И как все это осуществить?
|
Tungusv,
:-? |
Вот что получилось, но на странице ничего нет
var n = 2, m = 9;
var colorRandom = function randomInteger(min, max) { var rand = min + Math.random() * (max + 1 - min); rand = Math.floor(rand); return rand; } var mas = []; for (var i = 0; i < m; i++){ mas[i] = []; for (var j = 0; j < n; j++){ mas[i][j] = colorRandom(0, 255); }} console.log(mas); var table = document.createElement('table'), tr = table.appendChild(document.createElement('tbody')) .appendChild(document.createElement('tr')); for (i = 1; i < n; i++) { tr.appendChild(document.createElement('td')); }; |
Tungusv,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
где ? document.body.appendChild(table); посмотрите примеры и документацию ещё раз |
Заключить в script тоже самое?
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var n = 2, m = 9; var colorRandom = function randomInteger(min, max) { var rand = min + Math.random() * (max + 1 - min); rand = Math.floor(rand); return rand; } var mas = []; for (var i = 0; i < m; i++){ mas[i] = []; for (var j = 0; j < n; j++){ mas[i][j] = colorRandom(0, 255); }} var table = document.createElement('table'), tr = table.appendChild(document.createElement('tbody')) .appendChild(document.createElement('tr')); for (i = 1; i < 9; i++) { tr.appendChild(document.createElement('td')); }; document.body.appendChild(table); </script> </body> </html> |
Tungusv,
[HTML run]тут ваш код[/HTML] |
Тэг script тоже работает
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var n = 2, m = 9; var colorRandom = function randomInteger(min, max) { var rand = min + Math.random() * (max + 1 - min); rand = Math.floor(rand); return rand; } var mas = []; for (var i = 0; i < m; i++){ mas[i] = []; for (var j = 0; j < n; j++){ mas[i][j] = colorRandom(0, 255); }} var table = document.createElement('table'), tr = table.appendChild(document.createElement('tbody')) .appendChild(document.createElement('tr')); for (i = 1; i < 9; i++) { tr.appendChild(document.createElement('td')); }; document.body.appendChild(table); </script> </body> </html> |
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var n = 2, m = 9; var colorRandom = function randomInteger(min, max) { var rand = min + Math.random() * (max + 1 - min); rand = Math.floor(rand); return rand; } var mas = []; for (var i = 0; i < m; i++){ mas[i] = []; for (var j = 0; j < n; j++){ mas[i][j] = colorRandom(0, 255); }} var table = document.createElement('table'), tr = table.appendChild(document.createElement('tbody')) .appendChild(document.createElement('tr')); for (i = 1; i < 9; i++) { tr.appendChild(document.createElement('td')); }; document.body.appendChild(table); [/html]; </script> </body> </html> |
создание таблицы
Tungusv,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
td{
height: 22px; width: 22px; text-align: center;
}
</style>
</head>
<body >
<script>
function createTable(row, col, parent)
{
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 = ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
td.style.backgroundColor = "#" + color;
arr[i].push(color)
}
}
parent.appendChild(table)
return arr
}
var body = document.body;
var mas = createTable(3, 8, body);
console.log(mas);
</script>
</body>
</html>
|
а в другом массиве эти цвета можно будет сортировать по возростанию значений построчно?
|
Tungusv,
массив mas сортируйте, как вам хочется. |
Как взять этот же массив и из первого массива и отсортировать ?
|
Tungusv,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
td{
height: 22px; width: 80px; text-align: center;
}
</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 = parseInt(color, 16);
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 = mas.map(function(ar) {
return ar.sort(function(a,b) {
return parseInt(a, 16) - parseInt(b, 16)
})
})
console.log(new_mas);
createTable(3, 8, body, new_mas);
</script>
</body>
</html>
|
Цвет мне нужен в цифрах и буквах и чтоб во 2м массиве было тожечто и в 1м толк. отсор
Попытался исправить твой код и что то только так получилось
<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 compareNumeric(a, b) {
if (a > b) return 1;
if (a < b) return -1;
}
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.innerHTML = "#" + 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>
|
Цитата:
td.textContent = parseInt(color, 16); на td.textContent = "#" + color; копировать внимательно код, перед копированием обновлять страницу желательно, возможны изменения. |
второй массив не появляется
<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>
|
Цитата:
Цитата:
|
Сортировка массива по строкам или столбцам и вывод результата в таблицу
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>
|
сортировка 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);
|
Tungusv,
не понимаю, что вы спросили. |
Как сделать чтоб 3й массив был 2м только отсортированным?
сейчас в 3м массиве данные из 2го отсортированные и переставленные относительно столбцов.
|
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])
})
});
|
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, время: 17:33. |