0

Добавить к зарплате символ валюты, значение 1000-3999 сделать курсивом, 4000-5999 - подчеркнутыми, 6000+ - жирными.

<!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 ответа 2

1

Нуу... если сильно хочется привязать скрипт именно к разметке, это будет выглядеть так:

parseFloat() здесь не обязателен. Он просто берет строку, которая начинается с числа, отбрасывает лишнее и оставляет только число. Т.е. из '5000 рублей' оставит только число 5000, которое можно сравнивать с другими числами. Разницу между "строго меньше" и "меньше или равно" - наверно и так знаете.

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

4
  • Спасибо за помощь) А как добавить к колонке зарплата символ валюты? 10 мая 2019 в 14:13
  • Добавил в ответ (евсевственно, пробел перед символом можно и убрать). Но задолбаетесь работать с такими комбо-селекторами... с классами работать тупо легче) Но это дело можно было бы и без скрипта, в CSS прописать table tr td:last-child:after { content: ' $'; } 10 мая 2019 в 14:20
  • @АняЕськина там же есть символ валюты 10 мая 2019 в 14:21
  • Извините. сразу не заметила) 10 мая 2019 в 14:25
0

Как и в предыдущем вопросе - если работу можно вынести в CSS - выносите.

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.