Здравствуйте. Нужна помощь по заданию с использованием библиотеки jQuery

120
11 декабря 2020, 19:10

1. Покрасить имя людей в зависимости от пола в розовый или голубой цвет.

$(document.body).ready(function() { 
  // write your code here 
});
body { 
  margin: 0; 
  padding: 50px; 
} 
 
table { 
  margin: auto; 
  text-align: center; 
} 
 
td { 
  min-width: 50px; 
  padding: 2px 10px; 
} 
 
td:first-child { 
  text-align: left; 
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
 
<table border=1> 
  <tr> 
    <th>Ім'я</th> 
    <th>Стать</th> 
    <th>Вік</th> 
    <th>Одружений(a)</th> 
    <th>Сини</th> 
    <th>Доньки</th> 
    <th>Дом. тварина</th> 
    <th>Зарплата</th> 
  </tr> 
  <tr> 
    <td>Додковська Яна</td> 
    <td>Жін.</td> 
    <td>42</td> 
    <td>Так</td> 
    <td>0</td> 
    <td>1</td> 
    <td>метелик</td> 
    <td>334</td> 
  </tr> 
  <tr> 
    <td>Яцуненкова Юлія</td> 
    <td>Жін.</td> 
    <td>31</td> 
    <td>Ні</td> 
    <td>1</td> 
    <td>0</td> 
    <td>пацюк</td> 
    <td>788</td> 
  </tr> 
  <tr> 
    <td>Білай Олександр</td> 
    <td>Чол.</td> 
    <td>51</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>3</td> 
    <td>жаба</td> 
    <td>3821</td> 
  </tr> 
  <tr> 
    <td>Ярюшенк Дмитро</td> 
    <td>Чол.</td> 
    <td>62</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>1</td> 
    <td>кіт</td> 
    <td>822</td> 
  </tr> 
  <tr> 
    <td>Сольвейстров Марк</td> 
    <td>Чол.</td> 
    <td>61</td> 
    <td>Так</td> 
    <td>0</td> 
    <td>0</td> 
    <td>скорпіон</td> 
    <td>348</td> 
  </tr> 
  <tr> 
    <td>Вєльковський Олександр</td> 
    <td>Чол.</td> 
    <td>66</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>0</td> 
    <td>метелик</td> 
    <td>722</td> 
  </tr> 
  <tr> 
    <td>Каретан Андрій</td> 
    <td>Чол.</td> 
    <td>44</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>1</td> 
    <td>метелик</td> 
    <td>200</td> 
  </tr> 
  <tr> 
    <td>Гіроєва Дарина</td> 
    <td>Жін.</td> 
    <td>62</td> 
    <td>Так</td> 
    <td>3</td> 
    <td>1</td> 
    <td>-</td> 
    <td>5743</td> 
  </tr> 
  <tr> 
    <td>Тяфф Іван</td> 
    <td>Чол.</td> 
    <td>46</td> 
    <td>Так</td> 
    <td>3</td> 
    <td>1</td> 
    <td>миша</td> 
    <td>7843</td> 
  </tr> 
</table>

Answer 1

$(document.body).ready(function() { 
  $('tr td:first-child').each(function(i,elem) { 
    if ($(this).next().text()=='Жін.') { 
      $(this).css("color", "pink"); 
    } 
    if ($(this).next().text()=='Чол.') { 
       $(this).css("color", "lightblue"); 
    } 
  }); 
});
body { 
  margin: 0; 
  padding: 50px; 
} 
 
table { 
  margin: auto; 
  text-align: center; 
} 
 
td { 
  min-width: 50px; 
  padding: 2px 10px; 
} 
 
td:first-child { 
  text-align: left; 
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
 
<table border=1> 
  <tr> 
    <th>Ім'я</th> 
    <th>Стать</th> 
    <th>Вік</th> 
    <th>Одружений(a)</th> 
    <th>Сини</th> 
    <th>Доньки</th> 
    <th>Дом. тварина</th> 
    <th>Зарплата</th> 
  </tr> 
  <tr> 
    <td>Додковська Яна</td> 
    <td>Жін.</td> 
    <td>42</td> 
    <td>Так</td> 
    <td>0</td> 
    <td>1</td> 
    <td>метелик</td> 
    <td>334</td> 
  </tr> 
  <tr> 
    <td>Яцуненкова Юлія</td> 
    <td>Жін.</td> 
    <td>31</td> 
    <td>Ні</td> 
    <td>1</td> 
    <td>0</td> 
    <td>пацюк</td> 
    <td>788</td> 
  </tr> 
  <tr> 
    <td>Білай Олександр</td> 
    <td>Чол.</td> 
    <td>51</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>3</td> 
    <td>жаба</td> 
    <td>3821</td> 
  </tr> 
  <tr> 
    <td>Ярюшенк Дмитро</td> 
    <td>Чол.</td> 
    <td>62</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>1</td> 
    <td>кіт</td> 
    <td>822</td> 
  </tr> 
  <tr> 
    <td>Сольвейстров Марк</td> 
    <td>Чол.</td> 
    <td>61</td> 
    <td>Так</td> 
    <td>0</td> 
    <td>0</td> 
    <td>скорпіон</td> 
    <td>348</td> 
  </tr> 
  <tr> 
    <td>Вєльковський Олександр</td> 
    <td>Чол.</td> 
    <td>66</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>0</td> 
    <td>метелик</td> 
    <td>722</td> 
  </tr> 
  <tr> 
    <td>Каретан Андрій</td> 
    <td>Чол.</td> 
    <td>44</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>1</td> 
    <td>метелик</td> 
    <td>200</td> 
  </tr> 
  <tr> 
    <td>Гіроєва Дарина</td> 
    <td>Жін.</td> 
    <td>62</td> 
    <td>Так</td> 
    <td>3</td> 
    <td>1</td> 
    <td>-</td> 
    <td>5743</td> 
  </tr> 
  <tr> 
    <td>Тяфф Іван</td> 
    <td>Чол.</td> 
    <td>46</td> 
    <td>Так</td> 
    <td>3</td> 
    <td>1</td> 
    <td>миша</td> 
    <td>7843</td> 
  </tr> 
</table>

Answer 2

Есть еще вариант с добавлением классов:

Но там от jQuery только ready))

$(document.body).ready(function() { 
  const stat = document.getElementsByClassName('stat'); 
  const color = document.getElementsByClassName('color'); 
  for(let i = 0; i < stat.length; i++){ 
    if( stat[i].innerText.match(/Жін/ig) ){ 
      color[i].style.color = '#ac007c'; 
    } else if( stat[i].innerText.match(/Чол/ig) ) { 
      color[i].style.color = '#045acf'; 
    } 
  }   
});
body { 
  margin: 0; 
  padding: 50px; 
} 
 
table { 
  margin: auto; 
  text-align: center; 
} 
 
td { 
  min-width: 50px; 
  padding: 2px 10px; 
} 
 
td:first-child { 
  text-align: left; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<table border=1> 
  <tr> 
    <th>Ім'я</th> 
    <th>Стать</th> 
    <th>Вік</th> 
    <th>Одружений(a)</th> 
    <th>Сини</th> 
    <th>Доньки</th> 
    <th>Дом. тварина</th> 
    <th>Зарплата</th> 
  </tr> 
  <tr> 
    <td class="color">Додковська Яна</td> 
    <td class="stat">Жін.</td> 
    <td>42</td> 
    <td>Так</td> 
    <td>0</td> 
    <td>1</td> 
    <td>метелик</td> 
    <td>334</td> 
  </tr> 
  <tr> 
    <td class="color">Яцуненкова Юлія</td> 
    <td class="stat">Жін.</td> 
    <td>31</td> 
    <td>Ні</td> 
    <td>1</td> 
    <td>0</td> 
    <td>пацюк</td> 
    <td>788</td> 
  </tr> 
  <tr> 
    <td class="color">Білай Олександр</td> 
    <td class="stat">Чол.</td> 
    <td>51</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>3</td> 
    <td>жаба</td> 
    <td>3821</td> 
  </tr> 
  <tr> 
    <td class="color">Ярюшенк Дмитро</td> 
    <td class="stat">Чол.</td> 
    <td>62</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>1</td> 
    <td>кіт</td> 
    <td>822</td> 
  </tr> 
  <tr> 
    <td class="color">Сольвейстров Марк</td> 
    <td class="stat">Чол.</td> 
    <td>61</td> 
    <td>Так</td> 
    <td>0</td> 
    <td>0</td> 
    <td>скорпіон</td> 
    <td>348</td> 
  </tr> 
  <tr> 
    <td class="color">Вєльковський Олександр</td> 
    <td class="stat">Чол.</td> 
    <td>66</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>0</td> 
    <td>метелик</td> 
    <td>722</td> 
  </tr> 
  <tr> 
    <td class="color">Каретан Андрій</td> 
    <td class="stat">Чол.</td> 
    <td>44</td> 
    <td>Так</td> 
    <td>1</td> 
    <td>1</td> 
    <td>метелик</td> 
    <td>200</td> 
  </tr> 
  <tr> 
    <td class="color">Гіроєва Дарина</td> 
    <td class="stat">Жін.</td> 
    <td>62</td> 
    <td>Так</td> 
    <td>3</td> 
    <td>1</td> 
    <td>-</td> 
    <td>5743</td> 
  </tr> 
  <tr> 
    <td class="color">Тяфф Іван</td> 
    <td class="stat">Чол.</td> 
    <td>46</td> 
    <td>Так</td> 
    <td>3</td> 
    <td>1</td> 
    <td>миша</td> 
    <td>7843</td> 
  </tr> 
</table>

P.s. соседнее решение круче, если речь идет о конкретной разметке. Этот подойдет на случай, если захочется как угодно перетасовать таблицу, но больше не лезть в скрипт)

READ ALSO
Помощь с использованием библиотеки jQuery

Помощь с использованием библиотеки jQuery

задание - После имени человека Добавить

98
Слайдеры на весь экран

Слайдеры на весь экран

Всем привет! Хотелось узнать какие сейчас самые лучшие полноэкранные слайдеры для содержания контента сайта и перемещения по немуНапример...

135
Плавная прокрутка к якорю в табах

Плавная прокрутка к якорю в табах

Есть два меню и два открывающихся таба, необходимо при клике на одно из меню прокрутить плавно к якорю который находится НАД меню табами

113
fetch данные приходят два раза

fetch данные приходят два раза

как предотвратить двойной фетчинг данных, мешает при рендере html в элемент

110