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

Тема в разделе "JavaScript", создана пользователем Den1a, 18 окт 2016.

  1. Den1a

    Den1a

    Регистрация:
    16 авг 2013
    Сообщения:
    55
    Симпатии:
    3
    Здравствуйте.

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

    Заранее благодарен.
    HTML:
            <table>
                <tr>
                    <td>11</td>
                    <td>22</td>
                    <td>65</td>
                    <td>14</td>
                    <td>35</td>
                </tr>
                <tr>
                    <td>39</td>
                    <td>12</td>
                    <td>84</td>
                    <td>45</td>
                    <td>38</td>
                </tr>
                <tr>
                    <td>37</td>
                    <td>39</td>
                    <td>52</td>
                    <td>38</td>
                    <td>24</td>
                </tr>
            </table>
     
    Lasted edited by : 18 окт 2016
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    на чистом js? или jquery(что-нибудь еще)?
     
  3. settr

    settr

    Регистрация:
    12 окт 2016
    Сообщения:
    67
    Симпатии:
    54
    Вариант на jQuery
    ( талице даём id="tableid")
    Код:
    <script>
    $('#tableid tr').each(function(index, element) {
        var tds = $(element).find( "td" );
        var max = +$(tds).eq(0)[0].innerText ;
        var min = max ;
        var max_index;
        var min_index;
        $(tds).each(function(ind, el) {
            var val = +$(el).text();
            if ( val >= max ) {
                max = val;
                max_index = ind;
            }
            if ( val <= min ) {
                min = val;
                min_index = ind;
            }
        })
        $(tds).eq(max_index).css("color", "red");
        $(tds).eq(min_index).css("color", "blue");
    });
    </script>