Add to salary a currency symbol, the value 1000-3999 should be italicized, 4000-5999 - underlined, 6000+ - bold.

<!DOCTYPE html> <html> <head> <title>Лабораторна робота №12</title> <style type="text/css"> body { margin: 0; padding: 50px; } table { margin: auto; text-align: center; } td{ min-width: 50px; padding: 2px 10px; } td:first-child{ text-align: left; } td:person{ text-align: right; } </style> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script type="text/javascript"> $(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", "blue"); } }); $('table tr td:first-child') .filter(function(index, text){ let row1 = +$(this).parent().children(":eq(4)").text(); let row2 = +$(this).parent().children(":eq(5)").text(); return row2==1 || row1==0 || row2 && row1 ; }) .append("👦"); $('table tr td:first-child') .filter(function(index, text){ let row1 = +$(this).parent().children(":eq(4)").text(); let row2 = +$(this).parent().children(":eq(5)").text(); return row2==0 || row1==1 || row2 && row1 ; }) .append("👧"); // write your code here }); </script> </head> <body> <table id="mytable" 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> <tr><td>Гем Денис</td><td>Чол.</td><td>37</td><td>Так</td><td>0</td><td>3</td><td>ящірка</td><td>1881</td></tr> <tr><td>Ткачюк Станіслав</td><td>Чол.</td><td>21</td><td>Ні</td><td>1</td><td>0</td><td>миша</td><td>270</td></tr> <tr><td>Мазєренко Олександр</td><td>Чол.</td><td>20</td><td>Так</td><td>2</td><td>1</td><td>равлик</td><td>8307</td></tr> </table> </body> </html>

    2 answers 2

    Well ... if you really want to tie the script to the markup, it will look like this:

    parseFloat() is optional here. It simply takes a string that starts with a number, discards the excess and leaves only the number. Those. of the '5000 рублей' will leave only the number 5000, which can be compared with other numbers. The difference between "strictly less" and "less or equal" - probably already know.

     $(document.body).ready(function () { //Добавлено: $('table tr td:last-child').each(function(){ $(this).text( $(this).text() + ' $' );//или какой-то другой символ... let val = parseFloat( $(this).text() ); if( val < 4000 && val > 999 ){ $(this).html( '<i>' + $(this).html() + '</i>' ); } else if( val >= 4000 && val < 6000 ) { $(this).html( '<u>' + $(this).html() + '</u>' ); } else if( val >= 6000 ) { $(this).html( '<b>' + $(this).html() + '</b>' ); } }); //Дальше не трогал... но не выдержал и поменял цвета. $('tr td:first-child').each(function(i,elem) { if ($(this).next().text()=='Жін.') { $(this).css("color", "#ac007c"); // Темно-малиновый } if ($(this).next().text()=='Чол.') { $(this).css("color", "#045acf"); // Синий } }); $('table tr td:first-child') .filter(function(index, text){ let row1 = +$(this).parent().children(":eq(4)").text(); let row2 = +$(this).parent().children(":eq(5)").text(); return row2==1 || row1==0 || row2 && row1 ; }) .append("👦"); $('table tr td:first-child') .filter(function(index, text){ let row1 = +$(this).parent().children(":eq(4)").text(); let row2 = +$(this).parent().children(":eq(5)").text(); return row2==0 || row1==1 || row2 && row1 ; }) .append("👧"); // 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; } td:person{ text-align: right; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="mytable" 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> <tr><td>Гем Денис</td><td>Чол.</td><td>37</td><td>Так</td><td>0</td><td>3</td><td>ящірка</td><td>1881</td></tr> <tr><td>Ткачюк Станіслав</td><td>Чол.</td><td>21</td><td>Ні</td><td>1</td><td>0</td><td>миша</td><td>270</td></tr> <tr><td>Мазєренко Олександр</td><td>Чол.</td><td>20</td><td>Так</td><td>2</td><td>1</td><td>равлик</td><td>8307</td></tr> </table>

    • Thanks for the help) And how to add a currency symbol to the salary column? - Anya Yeskina
    • Added to the answer (Eushevstvenno, the space before the character can and be removed). But you don’t work with such combo selectors ... it’s stupidly easier to work with classes) But this thing could have been done without a script, table tr td:last-child:after { content: ' $'; } table tr td:last-child:after { content: ' $'; } - OPTIMUS PRIME
    • @ AnyaEskina there is also a currency symbol - MaximLensky 2:21 pm
    • Excuse me. Immediately did not notice) - Anya Yeskina

    As in the previous question - if the work can be taken out in CSS - take it out.

     $(".slr").each(function(){ let v = +$(this).text(); if(v > 6000) $(this).addClass("slr-6000") else if(v > 4000) $(this).addClass("slr-4000") else if(v > 1000) $(this).addClass("slr-1000"); }); 
     .slr::before { content: "$"; } .slr-1000 { font-style: italic; } .slr-4000 { text-decoration: underline; } .slr-6000 { font-weight: bold; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="mytable" border=1> <tr><th>Ім'я</th><th>Зарплата</th></tr> <tbody> <tr><td>Додковська Яна</td><td class="slr">334</td></tr> <tr><td>Яцуненкова Юлія</td><td class="slr">1500</td></tr> <tr><td>Білай Олександр</td><td class="slr">4500</td></tr> <tr><td>Ярюшенк Дмитро</td><td class="slr">7000</td></tr> </tbody> </table>