За последние 24 часа нас посетили 19068 программистов и 1639 роботов. Сейчас ищут 1824 программиста ...

Подсветить min и max значение в таблице

Тема в разделе "JavaScript и AJAX", создана пользователем den1a, 17 окт 2016.

  1. den1a

    den1a Новичок

    С нами с:
    7 окт 2016
    Сообщения:
    7
    Симпатии:
    1
    Здравствуйте.

    Помогите, пожалуйста, с кодом js.
    Необходимо в каждой строке подсветить одним цветом минимальную цифру и другим цветом максимальную.

    Заранее благодарен.
    Код (Text):
    1.         <table>
    2.             <tr>
    3.                 <td>11</td>
    4.                 <td>22</td>
    5.                 <td>65</td>
    6.                 <td>14</td>
    7.                 <td>35</td>
    8.             </tr>
    9.             <tr>
    10.                 <td>39</td>
    11.                 <td>12</td>
    12.                 <td>84</td>
    13.                 <td>45</td>
    14.                 <td>38</td>
    15.             </tr>
    16.             <tr>
    17.                 <td>37</td>
    18.                 <td>39</td>
    19.                 <td>52</td>
    20.                 <td>38</td>
    21.                 <td>24</td>
    22.             </tr>
    23.         </table>
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Сделать всё за тебя?
     
  3. den1a

    den1a Новичок

    С нами с:
    7 окт 2016
    Сообщения:
    7
    Симпатии:
    1
    Хоть ссылку на похожий вопрос. С js совсем мало знаком.
     
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Довольно просто с помощью jquery по css селектору получить все td потом в них все tr и обойти циклом, в временную переменную записывать минимальное и максимальное значение, запомнит его расположение и потом после цикла подсветить
     
  5. den1a

    den1a Новичок

    С нами с:
    7 окт 2016
    Сообщения:
    7
    Симпатии:
    1
    Вот сам разобрался. Может кому пригодится для быстрого образца.
    Добавим еще 2 стиля css
    max-price
    max-price

    Код (Text):
    1. $('table tr').each(function () { //Считываем таблицу построчно
    2.     var arr_price = [] // Объявим массив
    3.    
    4.     $(this).find('.td').each(function () { //В каждой строке найдем ячейки с ценой
    5.         arr_price.push( $(this).text() ); //Получим цену ячейки и запишем в массив
    6.     });
    7.  
    8.     var max = Math.max.apply(Array, arr_price); //Найдем максимальную цену
    9.     var min = Math.min.apply(Array, arr_price); //Найдем минимальную цену
    10.    
    11.     $(this).find('.td:contains("' + max + '")').addClass("max-price"); //К максимальной цене добавим класс max-price
    12.     $(this).find('.td:contains("' + min + '")').addClass("min-price"); //К минимальной цене добавим класс min-price
    13. });
     
    denis01 нравится это.