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>
$(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>
Есть еще вариант с добавлением классов:
Но там от 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. соседнее решение круче, если речь идет о конкретной разметке. Этот подойдет на случай, если захочется как угодно перетасовать таблицу, но больше не лезть в скрипт)
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Всем привет! Хотелось узнать какие сейчас самые лучшие полноэкранные слайдеры для содержания контента сайта и перемещения по немуНапример...
Есть два меню и два открывающихся таба, необходимо при клике на одно из меню прокрутить плавно к якорю который находится НАД меню табами
как предотвратить двойной фетчинг данных, мешает при рендере html в элемент