Показать сообщение отдельно
  #8 (permalink)  
Старый 23.01.2019, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

denis_kontarev,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .ok{
      background-color: #228B22;
      color: #FFFFFF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $("#cf_1x2").on("input", function() {
    var val = this.value.trim();
    $.each($("#t tbody"), function(i, tbody) {
        var tds = $("td", tbody).filter(function(i, td) {
        var num = td.textContent.match(/\d+(.\d+)?(?=\s*%)/);
        var ok = false;
        if(val && num != null){
        ok = !isNaN(+val) && +val < +num[0];
        };
        $(td).toggleClass("ok", ok);
        return ok || !val;
        });
        $(this).toggle(!!tds.length);
    });
  });
});

  </script>
</head>

<body>

<input type="text" class="form-control pull-right" id="cf_1x2" placeholder="Движение 1X2 от %" style="width: 100%;">

<table id="t">
    <thead>
        <th>22.01</th>
        <th>Команды</th>
        <th>1</th>
        <th>X</th>
        <th>2</th>
    </thead>
    <tbody>
        <tr class="team"><td>70%</td></tr>
        <tr class="1x2"><td>1</td></tr>
        <tr class="handicap"><td>2</td></tr>
        <tr class="total"><td>3</td></tr>
    </tbody>
    <tbody>
        <tr class="team"><td>40%</td></tr>
        <tr class="1x2"><td>1</td></tr>
        <tr class="handicap"><td>2</td></tr>
        <tr class="total"><td>3</td></tr>
    </tbody>
    <tbody>
        <tr class="team"><td>10%</td></tr>
        <tr class="1x2"><td>1</td></tr>
        <tr class="handicap"><td>2</td></tr>
        <tr class="total"><td>3</td></tr>
    </tbody>
</table>

</body>
</html>
Ответить с цитированием