Цвет отдельной ячейки при наведении на строку, соблюдая определенное условие

@AndersNovitskiy · Регистрация: 07.12.2017

Студворк — интернет-сервис помощи студентам

Всем добрый вечер!
Уважаемые форумчане, нужна Ваша помощь! Сижу вот две недели уже и все никак не получается реализовать задуманное.
В общем есть таблица из нескольких колонок и строк. Нужно сделать так, что бы при наведении на строку, менялся цвет последней ячейки, но при условии например если там цифра "1" то в желтый цвет, а если цифра "0" то в красный. Подскажите пожалуйста, уже все перегуглил, ничего нет подходящего

@Kifsif · 07.12.2017, 22:47

Если страница рендерена динамически, то можно спрограммировать и каждой ячейке с цифрой 1 задать класс "yellow". И дальше плясать стилями.
Если же речь о статике, то только джаваскриптом.

@AndersNovitskiy · 07.12.2017, 22:53 **[ТС]**

значение не постоянное, оно может быть как 1 так и 0, классы не подходят. а скрипт может показать?

@Kifsif · 07.12.2017, 23:00

Так и класс может быть как yellow, так и отсутствовать. Если динамически рендерится 1, значит, там же динамически рендерится класс.
По поводу скрипта: сначала формализация задачи. Может, вот это все вам на 100 % уже подходит.

@mrtoxas · 07.12.2017, 23:01

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [data-color="red"]:hover :last-child {
      background-color: red;
    }
    [data-color="green"]:hover :last-child {
      background-color: green;
    }
  </style>
</head>
 
<body>
  <table id="table">
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
      <td>0</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
      <td>1</td>
    </tr>
  </table>
 
  <script>
    var tr = document.querySelectorAll("#table tr td:last-child");
    [].forEach.call(tr, function(elem) {
      if (elem.textContent == "1") {
        elem.parentElement.dataset.color = "green";
      } else if (elem.textContent == "0") {
        elem.parentElement.dataset.color = "red";
      }
    });
  </script>
</body>
 
</html>

@AndersNovitskiy · 07.12.2017, 23:07 **[ТС]**

То что нужно, спасибо огромное

@Kifsif · 07.12.2017, 23:16

а, пардон. При наведении на строку, менялся цвет последней ячейки. Надо подумать, можно ли без JS.

Добавлено через 8 минут
Это надо попробовать сделать на стилях.
Вот примерно по такому принципу:
http://jsfiddle.net/u7tYE/1/

Или используя +.

Зачем нагораживать JS?

В общем, вопрос к ТС: покажите свою таблицу. Сдается мне, не самое оптимальное решение. И тему поторопились перенести.

@mrtoxas · 07.12.2017, 23:53

Kifsif, внимательно всмотритесь в код, который я привел. Вот, очень внимательно. И вы уже придумали как сделать условие на CSS, чтобы разные цвета были для строк с 1 и для 0?

И код размещаем на форуме. Ссылка на песочницу - бонус.

@Kifsif · 08.12.2017, 00:37

Кажется, да. Я считаю, что тот, кто властен поставить единицу в ячейку, властен и класс ей поменять.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
 
   <head>
    <style>
        tr:hover > .redcell {
            background: red;
        }
        tr:hover > .yellowcell {
            background: yellow;
        }
    
    </style>
   </head>
 
   <body>
      <table id="table">
        <tr>
          <td>item1</td>
          <td>item2</td>
          <td>item3</td>
          <td class="yellowcell">1</td>
        </tr>
        <tr>
          <td>item1</td>
          <td>item2</td>
          <td>item3</td>
          <td class="redcell">0</td>
        </tr>
        <tr>
          <td>item1</td>
          <td>item2</td>
          <td>item3</td>
          <td class="yellowcell">1</td>
        </tr>
      </table>
   </body>
</html>

@j2FunOnly · 08.12.2017, 08:56

Не по теме:

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

Я считаю

Ха, при такой постановке задачи, вы считать можете что угодно, а потом выяснится, что ТС пилит какой-нибудь userscript для tampermonkey или расширение для браузера :) .

@AndersNovitskiy · 08.12.2017, 14:14 **[ТС]**

в продолжении вчерашнего нашего разговора, все получается если ввести значение самостоятельно, НО если значение последней ячейки выводить через ID то при наведении на строку, цвет ячейки не меняется
вот пример:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 
<style>
    [data-color="red"]:hover :last-child {
      background-color: red;
    }
    [data-color="yellow"]:hover :last-child {
      background-color: yellow;
    }
  </style>
  <script>
 
function s() {
    for (i = 1; i < m_s.length; i++) {
        td = document.getElementById('s' + '-' + i);
        info = str[m_s[i]];
        td.innerHTML = info.title;
        td.className = info.className;
    }
}
 
m_s = []
m_s[1] = 1     
m_s[2] = 0    
m_s[3] = 0 
 
     var str = [
    { title: 'нет' },
    { title: 'да' },
];
</script>
 
<body oncontextmenu="return false" oncopy="return false;" oncontextmenu="return false" onselectstart="return false;" onload="s()">
    
<table id="table" border=1>
    <tr>
        <td>1</td>
        <td>1,80</td>
        <td>17,27</td>
        <td>1,00</td>
        <td>(0°)</td>
        <td id="s-1"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>1,80</td>
        <td>17,27</td>
        <td>1,00</td>
        <td>(0°)</td>
        <td id="s-2"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>1,80</td>
        <td>17,27</td>
        <td>1,00</td>
        <td>(0°)</td>
        <td id="s-3"></td>
    </tr>
 
</table>
 
 
 
   <script>
    var tr = document.querySelectorAll("#table tr td:last-child");
    [].forEach.call(tr, function(elem) {
      if (elem.textContent == "да") {
        elem.parentElement.dataset.color = "yellow";
      } else if (elem.textContent == "нет") {
        elem.parentElement.dataset.color = "red";
      }
    });
  </script>
 
 
 
</body>

@mrtoxas · 08.12.2017, 16:06

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function s() {
  for (i = 1; i < m_s.length; i++) {
    let mS = m_s[i];
    let td = document.getElementById("s" + "-" + i);
    info = str[mS];
    td.innerHTML = info.title;
    td.className = info.className;
    
    if (mS == 1){
      td.parentElement.dataset.color = 'red';
    } else if(mS == 0){
      td.parentElement.dataset.color = 'yellow';
    }
  }
}
 
var m_s = [];
m_s[1] = 1;
m_s[2] = 0;
m_s[3] = 0;
 
var str = [{ title: "нет" }, { title: "да" }];

А еще лучше так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function s() {
  for (i = 1; i < m_s.length; i++) {
    let td = document.getElementById("s" + "-" + i);
    info = str[m_s[i]]; 
    td.innerHTML = info.title;
    td.className = info.className;
    td.parentElement.dataset.color = info.color;
  }
}
 
var m_s = [];
m_s[1] = 1;
m_s[2] = 0;
m_s[3] = 0;
 
var str = [{ title: "нет", color: "red" }, { title: "да", color: "yellow" }];

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [data-color="red"]:hover :last-child {
      background-color: red;
    }
    [data-color="yellow"]:hover :last-child {
      background-color: yellow;
    }
  </style>
</head>
 
<body onload="s()">
  <table border=1>
    <tr>
      <td>1</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-1"></td>
    </tr>
    <tr>
      <td>2</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-2"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-3"></td>
    </tr>
 
  </table>
 
  <script>
    function s() {
      for (i = 1; i < m_s.length; i++) {
        let td = document.getElementById("s" + "-" + i);
        let info = str[m_s[i]];
        td.innerHTML = info.title;
        td.className = info.className;
        td.parentElement.dataset.color = info.color;
      }
    }
    
    var m_s = [];
    m_s[1] = 1;
    m_s[2] = 0;
    m_s[3] = 0;
    
    var str = [{ title: "нет", color: "red" }, { title: "да", color: "yellow" }];
  </script>
 
</body>
 
</html>

Или классами, вместо атрибутов, как в примере у Kifsif:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .table tr:hover .hover-color_red{
      background-color: red;
    }
    .table tr:hover .hover-color_yellow {
      background-color: yellow;
    }
  </style>
</head>
 
<body onload="s()">
  <table class="table" border=1>
    <tr>
      <td>1</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-1"></td>
    </tr>
    <tr>
      <td>2</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-2"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-3"></td>
    </tr>
 
  </table>
 
  <script>
    function s() {
      for (i = 1; i < m_s.length; i++) {
        let td = document.getElementById("s" + "-" + i);
        let info = str[m_s[i]];
        td.innerHTML = info.title;
        td.className = info.className + ' hover-color_'+info.color;
      }
    }
    
    var m_s = [];
    m_s[1] = 1;
    m_s[2] = 0;
    m_s[3] = 0;
    
    var str = [{ title: "нет", color: "red" }, { title: "да", color: "yellow" }];
  </script>
 
</body>
 
</html>

@AndersNovitskiy · 08.12.2017, 22:14 **[ТС]**

Спасибо, помогло

@AndersNovitskiy · 09.12.2017, 23:14 **[ТС]**

Ребят, есть еще вопросы:
Можно ли сделать так, что бы значение полученное через ID в первой таблице, отображалось и во второй, с условием если в первой таблице значение "да", то во второй таблице значение "+" и если "нет" то в другой "-" ? две таблицы будут находиться на одной странице
вот пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .table tr:hover .hover-color_red{
      background-color: red;
    }
    .table tr:hover .hover-color_yellow {
      background-color: yellow;
    }
  </style>
</head>
 
<body onload="s()">
  <table class="table" border=1>
    <tr>
      <td>1</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-1"></td>
    </tr>
    <tr>
      <td>2</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-2"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>1,80</td>
      <td>17,27</td>
      <td>1,00</td>
      <td>(0°)</td>
      <td id="s-3"></td>
    </tr>
 
  </table>
 
<table border="1">
     <tr>
          <td></td>                     <!-- как сделать что бы здесь отображался плюс -->
          <td></td>                     <!-- а здесь минус -->
     </tr>
     <tr>
          <td></td>
          <td></td>
     </tr>
</table>
 
  <script>
    function s() {
      for (i = 1; i < m_s.length; i++) {
        let td = document.getElementById("s" + "-" + i);
        let info = str[m_s[i]];
        td.innerHTML = info.title;
        td.className = info.className + ' hover-color_'+info.color;
      }
    }
    
    var m_s = [];
    m_s[1] = 1;
    m_s[2] = 0;
    m_s[3] = 0;
    
    var str = [{ title: "нет", color: "red" }, { title: "да", color: "yellow" }];
  </script>
 
</body>
 
</html>

И второй вопрос:
вот таблица

HTML5
1
2
3
4
5
6
7
8
9
10
<table border="1">
     <tr>
          <td>+</td>
          <td>-</td>
     </tr>
     <tr>
          <td>-</td>
          <td>+</td>
     </tr>
</table>

подскажите как сделать что бы при наведении на "+" был один цвет ячейки, а при наведении на "-" другой цвет?
это не подходит onmouseover="over(this)" onmouseout="out(this)", так как его нужно вписывать в каждой ячейке где необходимо поменять цвет при наведении.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

Цвет отдельной ячейки при наведении на строку, соблюдая определенное условие

Решение

Решение

@AndersNovitskiy 0 / 0 / 0 Регистрация: 07.12.2017 Сообщений: 28

	Цвет отдельной ячейки при наведении на строку, соблюдая определенное условие 07.12.2017, 22:33. Показов 1425. Ответов 13 Метки нет (Все метки) Всем добрый вечер! Уважаемые форумчане, нужна Ваша помощь! Сижу вот две недели уже и все никак не получается реализовать задуманное. В общем есть таблица из нескольких колонок и строк. Нужно сделать так, что бы при наведении на строку, менялся цвет последней ячейки, но при условии например если там цифра "1" то в желтый цвет, а если цифра "0" то в красный. Подскажите пожалуйста, уже все перегуглил, ничего нет подходящего 0

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	07.12.2017, 22:47
	Если страница рендерена динамически, то можно спрограммировать и каждой ячейке с цифрой 1 задать класс "yellow". И дальше плясать стилями. Если же речь о статике, то только джаваскриптом. 0

@AndersNovitskiy 0 / 0 / 0 Регистрация: 07.12.2017 Сообщений: 28
	07.12.2017, 22:53 [ТС]
	значение не постоянное, оно может быть как 1 так и 0, классы не подходят. а скрипт может показать? 0

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	07.12.2017, 23:00
	Так и класс может быть как yellow, так и отсутствовать. Если динамически рендерится 1, значит, там же динамически рендерится класс. По поводу скрипта: сначала формализация задачи. Может, вот это все вам на 100 % уже подходит. 0

@AndersNovitskiy 0 / 0 / 0 Регистрация: 07.12.2017 Сообщений: 28
	07.12.2017, 23:07 [ТС]
	То что нужно, спасибо огромное 0

@Kifsif 145 / 113 / 31 Регистрация: 12.06.2011 Сообщений: 1,246
	07.12.2017, 23:16
	а, пардон. При наведении на строку, менялся цвет последней ячейки. Надо подумать, можно ли без JS. Добавлено через 8 минут Это надо попробовать сделать на стилях. Вот примерно по такому принципу: http://jsfiddle.net/u7tYE/1/ Или используя +. Зачем нагораживать JS? В общем, вопрос к ТС: покажите свою таблицу. Сдается мне, не самое оптимальное решение. И тему поторопились перенести. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.12.2017, 23:53
	Kifsif, внимательно всмотритесь в код, который я привел. Вот, очень внимательно. И вы уже придумали как сделать условие на CSS, чтобы разные цвета были для строк с 1 и для 0? И код размещаем на форуме. Ссылка на песочницу - бонус. 0

@AndersNovitskiy 0 / 0 / 0 Регистрация: 07.12.2017 Сообщений: 28
	08.12.2017, 22:14 [ТС]
	Спасибо, помогло 0