27.10.2016, 18:47
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Заливка строк таблицы
Привет, задача следующая, нужно залить строки таблицы в зависимости от значений первого столбца. Значение в первом столбце могут быть разными, и мы их не знаем.
Должно получиться так:
<table>
<tr><td>111</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>111</td><td>dfgdfg</td><td>asdfasfsfd</td></tr>
<tr><td>fff</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>111</td><td>fdsfsdf</td><td>kjhkhjk</td></tr>
<tr><td>fff</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>fff</td><td>6hy56</td><td>h56h56</td></tr>
<tr><td>ttt</td><td>6hy56</td><td>h56h56</td></tr>
<tr><td>ttt</td><td>ytutyu</td><td>32r23r</td></tr>
</table>
|
|
27.10.2016, 19:12
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Сообщение от Rise
|
Sav2907, источник значений в первом столбце?
|
Выборка из БД, но не SQL. Данные каждого столбца в массиве $a, $b, $c
|
|
27.10.2016, 19:20
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Сообщение от Rise
|
Sav2907, как данные попадают в таблицу?
|
циклом foreach
|
|
27.10.2016, 19:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
Заливка строк таблицы
Sav2907,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelectorAll("tr td:nth-child(1)");
var bgcolors = new Array("#F9B28C", "#9BC1EA", "#FEFF03");
function r()
{
return Math.round(255 * Math.random())
}
[].reduce.call(d, function(b, c) {
var a = c.textContent,
a = b[a] || (b[a] = bgcolors.pop() || "rgb(" + r() + ", " + r() + ", " + r() + ")");
c.parentNode.style.backgroundColor = a;
return b
}, {})
});
</script>
</head>
<body>
<table>
<tr><td>111</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>111</td><td>dfgdfg</td><td>asdfasfsfd</td></tr>
<tr><td>fff</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>111</td><td>fdsfsdf</td><td>kjhkhjk</td></tr>
<tr><td>fff</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>fff</td><td>6hy56</td><td>h56h56</td></tr>
<tr><td>ttt</td><td>6hy56</td><td>h56h56</td></tr>
<tr><td>ttt</td><td>ytutyu</td><td>32r23r</td></tr>
</table>
</body>
</html>
Последний раз редактировалось рони, 27.10.2016 в 19:39.
|
|
27.10.2016, 19:23
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Сообщение от рони
|
Sav2907,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelectorAll("tr td:nth-child(1)");
function r()
{
return Math.round(255 * Math.random())
}
[].reduce.call(d, function(b, c) {
var a = c.textContent,
a = b[a] || (b[a] = "rgb(" + r() + ", " + r() + ", " + r() + ")");
c.parentNode.style.backgroundColor = a;
return b
}, {})
});
</script>
</head>
<body>
<table>
<tr><td>111</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>111</td><td>dfgdfg</td><td>asdfasfsfd</td></tr>
<tr><td>fff</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>111</td><td>fdsfsdf</td><td>kjhkhjk</td></tr>
<tr><td>fff</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr><td>fff</td><td>6hy56</td><td>h56h56</td></tr>
<tr><td>ttt</td><td>6hy56</td><td>h56h56</td></tr>
<tr><td>ttt</td><td>ytutyu</td><td>32r23r</td></tr>
</table>
</body>
</html>
|
Я и не сомневался что вы это решите
|
|
27.10.2016, 19:25
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Рони, можете рассказать как это работает?
|
|
27.10.2016, 19:28
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Рони, интересует как подставить свои цвета
|
|
27.10.2016, 19:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
Sav2907,
цикл по первых ячейкам, содержимое ячейки уникальный ключ, если в обьекте нет такого ключа, генерируется новый цвет -- согласно значению данного ключа родителю(tr) присваивается это значение. всё.
|
|
27.10.2016, 19:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
Сообщение от Sav2907
|
Рони, интересует как подставить свои цвета
|
создать массив или обьект и брать из этого массива, вы уверены что цветов хватит?
|
|
27.10.2016, 19:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
Sav2907,
смотрите пример снова
|
|
|
|