Каждой строке в таблице свой фон. jquery

20 декабря 2020, 21:40

Имеется таблица с входными параметрами.

<table id="table">
<tr>
    <td>str1</td>
    <td>str2</td>
    <td>color1</td>
</tr>
<tr>
    <td>str4</td>
    <td>str5</td>
    <td>color2</td>
</tr>
<tr>
    <td>str7</td>
    <td>str8</td>
    <td>color1</td>
</tr>
<tr>
    <td>str10</td>
    <td>str11</td>
    <td>color2</td>
</tr>
<tr>
    <td>str13</td>
    <td>str14</td>
    <td>color3</td>
</tr>

В последнем столбце приходят данные color1, color2, color3. Подскажите пожалуйста, как сделать так, зная значения последнего столбца, присваивать фон всей строке. Например, где color1 - фон красный, color2 - зеленый, color3 - желтый.

Начал так:

var items=[];
$('#table td:last-child').each( function(){
items.push($(this).text());      
});
var items = $.unique( items );
$.each( items, function(i, item){
 // switch? 
})

Начало правильное?

Answer 1

let colours = { 
  color1: 'red', 
  color2: 'green', 
  color3: 'blue' 
}; 
 
$(_ => { 
  $('table tr td:last-child').each((i, e) => { 
    e = $(e); 
    e.parent().css({ 
      background: colours[e.text()] 
    }); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table id="table"> 
  <tr> 
    <td>str1</td> 
    <td>str2</td> 
    <td>color1</td> 
  </tr> 
  <tr> 
    <td>str4</td> 
    <td>str5</td> 
    <td>color2</td> 
  </tr> 
  <tr> 
    <td>str7</td> 
    <td>str8</td> 
    <td>color1</td> 
  </tr> 
  <tr> 
    <td>str10</td> 
    <td>str11</td> 
    <td>color2</td> 
  </tr> 
  <tr> 
    <td>str13</td> 
    <td>str14</td> 
    <td>color3</td> 
  </tr> 
</table>

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

translate с помощью onmouseenter

Необходимо чтобы при нахождении курсора на выезжающем div#rollfile, сам этот же div никуда не мог уехать, и лишь после смещения курсора за его пределы,...

120

javascript