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

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

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

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

Sav2907

27.10.2016 18:47

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

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

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

Sav2907

27.10.2016 19:12

Цитата:

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

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

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

Sav2907

27.10.2016 19:20

Цитата:

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

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

циклом foreach

рони	27.10.2016 19:20

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

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>

Sav2907

27.10.2016 19:23

Цитата:

Сообщение от рони (Сообщение 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

27.10.2016 19:25

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

Sav2907

27.10.2016 19:28

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

рони	27.10.2016 19:32

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

рони	27.10.2016 19:34

Цитата:

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

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

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

рони	27.10.2016 19:43

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

Sav2907

27.10.2016 22:31

Цитата:

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

Sav2907, где-то в цикле ...<tr class="c$a[index]"><td>$a[index]</td>... где-то в стиле .c111 { background: yellow; }...

Спасибо, но ваш вариант не подходит, потому что я незнаю какой индекс будет, чтобы поставить в стиле, там может быть 111 а может быть и 999, поэтому вариант от Рони именно то что нужно

Deff	28.10.2016 06:52

Sav2907,
Вы не вникли в ответ Rise, заготовка в стиле для классов постоянная!

Если число цветов ограничено и не изменяется в процессе просмотра, естественно удобнее стилем
к примеру

<!DOCTYPE>
<html>
<head>
<style>
table,tr,td{
  border-collapse:collapse
}
table td {
  min-width:73px;
  border:1px solid #000;
  padding:auto 3px;
}
tr td:first-child {
   text-align:right;
}
tr.D111 {background: #FEFF05;}
tr.D222 {background: #9CC1E6;}
tr.D888 {background: #F4AF85;}

</style>

</head>
<body>
<table>
<tr class="D111"><td> Бла-Бла</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr class="D111"><td> Бла-Бла</td><td>dfgdfg</td><td>asdfasfsfd</td></tr>
<tr class="D222"><td> Бла-Бла</td><td>fsdfweа</td><td>asfasfasf</td></tr>
<tr class="D888"><td> Бла-Бла</td><td>fdsfsdf</td><td>kjhkhjk</td></tr>
<tr class="D111"><td> Бла-Бла</td><td>fsdfwe</td><td>asfasfasf</td></tr>
<tr class="D222"><td> Бла-Бла</td><td>6hy56</td><td>h56h56</td></tr>
<tr class="D888"><td> Бла-Бла</td><td>6hy56</td><td>h56h56</td></tr>
<tr class="D888"><td> Бла-Бла</td><td>ytutyu</td><td>32r23r</td></tr>
</table>

</body>
</html>

Т.е. в стиле нун ток проставить соответствие Вашим цифрам (желательно с постоянной буквой в начале), вставляемым в класс, -коду цвета...

Цитата:

tr.D111 {background: #FEFF05;}

Sav2907

28.10.2016 09:20

Deff,
как прописать в стиль класс, который нам неизвестен??

Deff	28.10.2016 09:22

Цитата:

Сообщение от Sav2907 (Сообщение 433185)

Deff,
как прописать в стиль класс, который нам неизвестен??

Точно так же, как ты пишешь в ячейку таблицы ? Какая разница ?
Чо в скрипт вставлять в массив соответствия цифр в ячейке коду цвета, чо в стиле прописать чему цифры соответстувуют, какому цвету!
В класс пишешь те же цифры, что и в ячейку, ток желательно с буквой перед ними(Было какое то ограничение в старых браузах)...
Возможно чичас на первую букву уже нет..

Sav2907

28.10.2016 09:24

рони,
проблема с цветом шрифта

Sav2907

28.10.2016 09:35

Цитата:

Сообщение от Deff (Сообщение 433187)

$html .='<table class="ui fixed single line celled table" style="width: 70%; margin: auto; top: 4%; position: relative; z-index: 1;">';

	foreach ($data as $komaxid => $rows) {
	$html .= '
		<tr>
			<th colspan="5" style="text-align: center; font-weight: bold; background: black; color: white; height: 35px;">Komax '.$komaxid.'</th>
		</tr>
		<tr style="font-weight: bold;">
			<th>Operator</th>
			<th>XPPS Number</th>
			<th>Date start</th>
			<th>Date end</th>
			<th>GoodParts</th>
		</tr>';	
	  sort($rows);
		
		foreach ($rows as $key => $rows2){			
		$html .='<tr><td>'.$rows2['PersonnelNo'].'</td><td>'.$rows2['PPSNo'].'</td><td>'.$rows2['ActualStartCaoDtZt'].'</td><td>'.($rows2['ActualEndCaoDtZt'] == '1970-01-01 02:00:00' ? '' : $rows2['ActualEndCaoDtZt']).'</td><td>'.$rows2['GoodParts'].'</td><tr>';
		}
		
	}	
	$html .= '</table>';

рони	28.10.2016 09:36

Sav2907,
где код(макет) и в чём проблема?

рони	28.10.2016 09:40

Sav2907,
что мешает добавить

var colors ... 
c.parentNode.style.сolor = ...

Sav2907

28.10.2016 09:51

рони,
проблема только с темной заливкой, тогда черный текст не видно

рони	28.10.2016 09:55

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 = ["1628B7", "B14B0B", "99C3C1"];
     function inv(r)
    {
      return (parseInt(r, 16) ^ 0xFFFFFF | 0x1000000).toString(16).substring(1);

    }
    [].reduce.call(d, function(b, c) {
        var a = c.textContent,
            a = b[a] || (b[a] = bgcolors.pop() || "0000FF");
        c.parentNode.style.backgroundColor = "#"+a;
        c.parentNode.style.color = "#"+inv(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

28.10.2016 09:59

рони,
тогда первые 4 заливает, другие нет

рони	28.10.2016 10:05

Цитата:

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

тогда первые 4 заливает, другие нет

и чего делать?

Sav2907

28.10.2016 10:07

Цитата:

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

и чего делать?

как сделать чтобы заливались первые 3 уникальные, и так до конца. Типа синий, желтый, красный, синий, желтый, красный ....

рони	28.10.2016 10:08

Sav2907,
bgcolors напишите с запасом

Sav2907

28.10.2016 10:14

Цитата:

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

Sav2907,
bgcolors напишите с запасом

Типа так

рони	28.10.2016 10:14

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 = ["1628B7", "B14B0B", "99C3C1"];
     function inv(r)
    {
      return (parseInt(r, 16) ^ 0xFFFFFF | 0x1000000).toString(16).substring(1);

    }
    var i = -1, len = bgcolors.length;
    [].reduce.call(d, function(b, c) {
        var a = c.textContent,
            a = b[a] || (i = ++i%len,b[a] = bgcolors[i]);
        c.parentNode.style.backgroundColor = "#"+a;
        c.parentNode.style.color = "#"+inv(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>
<tr><td>eee</td><td>ytutyu</td><td>32r23r</td></tr>
</table>


</body>
</html>

рони	28.10.2016 10:18

Sav2907,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var f = document.querySelectorAll("tr td:nth-child(1)"),
        d = ["C5D9F1", "C4BD97", "E6B8B7"],
        b = -1,
        g = d.length;
    [].reduce.call(f, function(c, e) {
        var a = e.textContent,
            a = c[a] || (b = ++b % g, c[a] = d[b]);
        e.parentNode.style.backgroundColor = "#" + a;
        return c
    }, {})
});
  </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>
<tr><td>eee</td><td>ytutyu</td><td>32r23r</td></tr>
</table>


</body>
</html>

Sav2907

28.10.2016 10:26

рони,
Да, это оно, спасибо

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