1. Paint the name of people depending on the floor in pink or blue.

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

  • is it in what language? - MaximLensky
  • The code itself is written using HTML - Anya Yeskin
  • It is necessary to set the modifier, which will show M or F, and then cycle it through all the modifiers and set the corresponding value. - meine
  • That is the problem, what I do not fully understand how to write it down. There were attempts, but there were no changes. - Anya Yeskina
  • 2
    In Ukrainian - Anya Yeskina

2 answers 2

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

  • But in theory, the task sounds in such a way that you just need to change the color of the names depending on the gender, and not the background color, so to speak. - Anya Yeskina
  • @ Anya Eskina> _ <replace the word background-color with just color - OPTIMUS PRIME
  • Corrected the decision. - coder675

There is another option with the addition of classes:

But there is only ready from jQuery))

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

Ps the adjacent decision is cooler if we are talking about a specific markup. This is suitable in case you want to shuffle the table in any way you like, but no longer go into the script)