Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.10.2016, 18:47
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 27.10.2016, 19:12
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

Сообщение от Rise Посмотреть сообщение
Sav2907, источник значений в первом столбце?
Выборка из БД, но не SQL. Данные каждого столбца в массиве $a, $b, $c
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2016, 19:20
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

Сообщение от Rise Посмотреть сообщение
Sav2907, как данные попадают в таблицу?
циклом foreach
Ответить с цитированием
  #4 (permalink)  
Старый 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.
Ответить с цитированием
  #5 (permalink)  
Старый 27.10.2016, 19:23
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 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>
Я и не сомневался что вы это решите
Ответить с цитированием
  #6 (permalink)  
Старый 27.10.2016, 19:25
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

Рони, можете рассказать как это работает?
Ответить с цитированием
  #7 (permalink)  
Старый 27.10.2016, 19:28
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

Рони, интересует как подставить свои цвета
Ответить с цитированием
  #8 (permalink)  
Старый 27.10.2016, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Sav2907,
цикл по первых ячейкам, содержимое ячейки уникальный ключ, если в обьекте нет такого ключа, генерируется новый цвет -- согласно значению данного ключа родителю(tr) присваивается это значение. всё.
Ответить с цитированием
  #9 (permalink)  
Старый 27.10.2016, 19:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Сообщение от Sav2907
Рони, интересует как подставить свои цвета
создать массив или обьект и брать из этого массива, вы уверены что цветов хватит?
Ответить с цитированием
  #10 (permalink)  
Старый 27.10.2016, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление строк в таблицу и скрытие таблицы. III Общие вопросы Javascript 39 20.11.2015 10:05
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 21:32
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 15:41