Javascript-форум - Заливка строк таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Заливка строк таблицы (https://javascript.ru/forum/dom-window/65588-zalivka-strok-tablicy.html)

Заливка строк таблицы

Привет, задача следующая, нужно залить строки таблицы в зависимости от значений первого столбца. Значение в первом столбце могут быть разными, и мы их не знаем.
Должно получиться так:

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

Цитата:

Сообщение от Rise (Сообщение 433119)

Sav2907, источник значений в первом столбце?

Выборка из БД, но не SQL. Данные каждого столбца в массиве $a, $b, $c

Цитата:

Сообщение от Rise (Сообщение 433122)

Sav2907, как данные попадают в таблицу?

циклом foreach

Заливка строк таблицы

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>

Цитата:

Сообщение от рони (Сообщение 433124)

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>

Я и не сомневался что вы это решите

Рони, можете рассказать как это работает?

Рони, интересует как подставить свои цвета

Sav2907,
цикл по первых ячейкам, содержимое ячейки уникальный ключ, если в обьекте нет такого ключа, генерируется новый цвет -- согласно значению данного ключа родителю(tr) присваивается это значение. всё.

Цитата:

Сообщение от Sav2907

Рони, интересует как подставить свои цвета

создать массив или обьект и брать из этого массива, вы уверены что цветов хватит?

Sav2907,
смотрите пример снова