Форум

_Eldar_ · #1 (**permalink**) 02.11.2015, 10:06

Помогите со скриптом

<div id="list">
<table>
<tr class='tr_51'><td>510</td><td>&nbsp;</td></tr>
<tr class='tr_55'><td>550</td><td>&nbsp;</td></tr>
<tr class='tr_57'><td>570</td><td>&nbsp;</td></tr>
<tr class='tr_51'><td>510</td><td>&nbsp;</td></tr>
<tr class='tr_61'><td>610</td><td>&nbsp;</td></tr>
<tr class='tr_51'><td>510</td><td>&nbsp;</td></tr>
</table>
<a href='#' id='51'>показать строки только 51</a>
</div>

при нажатии на показать строки только 51 скрываются строки у таблицы с другим классом (не содержащим 51) + появляется возможность вернуть все строки показать все строки
спасибо

Rise · #2 (**permalink**) 02.11.2015, 10:16

_Eldar_, где скрипт?

рони · #3 (**permalink**) 02.11.2015, 10:28

_Eldar_,
как назначить обработку клика?
как получить все tr?
как в цикле проверить каждую tr?
как изменять стили программно?
посмотреть как сделаны Открывашка добавить своё условие

_Eldar_ · #4 (**permalink**) 02.11.2015, 10:30

Сообщение от Rise

_Eldar_, где скрипт?

скрипт нужен, ок, попробую
а что такое 232 - не знаю

_Eldar_ · #5 (**permalink**) 02.11.2015, 10:45

все получилось

<a href='#' id='51_' style='display:none'>показать все строки</a>

$( "#51" ).click(function() {
    $('#list tr[class *= "51"]').hide();
    $('#51_').show();
    $('#51').hide();
});
$( "#51_" ).click(function() {
    $('#list tr:hidden').show();
    $('#51').show();
    $('#51_').hide();
});

рони · #6 (**permalink**) 02.11.2015, 10:54

_Eldar_,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active{
     color:  #8B4513;
     background-color:#00FA9A;
     border: solid 1px #8B4513;
     padding: 3px
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function() {
    var a = $("a"),
        b = $("tr");
    a.click(function() {
        $(".active").not(this).click();
        var a = this.id,        
        tr = b.filter(function() {
            return -1 == this.className.indexOf(a)
        });
        tr.toggle();
        $(this).toggleClass("active")
    })
});
  </script>
</head>

<body>
<div id="list">
<table>
<tr class='tr_51'><td>510</td><td>&nbsp;</td></tr>
<tr class='tr_55'><td>550</td><td>&nbsp;</td></tr>
<tr class='tr_57'><td>570</td><td>&nbsp;</td></tr>
<tr class='tr_51'><td>510</td><td>&nbsp;</td></tr>
<tr class='tr_61'><td>610</td><td>&nbsp;</td></tr>
<tr class='tr_51'><td>510</td><td>&nbsp;</td></tr>
</table>
<a href='#' id='51'>показать строки только 51</a><br>
<a href='#' id='57'>показать строки только 57</a>
</div>




</body>

</html>

_Eldar_ · #7 (**permalink**) 02.11.2015, 11:04

спасибо, как-то сложен пока для меня в понимании данный код,
когда общаешься со знающими людьми - то некоторые идеи сами в голову приходят
да, заметил что мой код скрывает строки с нужным мне классом, хотя мне надо было их отобразить, добавил вначале все скрыть, а потом просто отобразить ссылки с нужным мне классом, т.к. не нашел селектора class 'не содержит 51'

Mess4me · #8 (**permalink**) 02.11.2015, 19:50

Или так

$('a').click(function () {
         $('tr:not([class=tr_' + this.id).toggle();
    })

Форум

Справочник

Discord чат

Курсы javascript