скрыть с другим классом tr у table
Помогите со скриптом
<div id="list"> <table> <tr class='tr_51'><td>510</td><td> </td></tr> <tr class='tr_55'><td>550</td><td> </td></tr> <tr class='tr_57'><td>570</td><td> </td></tr> <tr class='tr_51'><td>510</td><td> </td></tr> <tr class='tr_61'><td>610</td><td> </td></tr> <tr class='tr_51'><td>510</td><td> </td></tr> </table> <a href='#' id='51'>показать строки только 51</a> </div> при нажатии на показать строки только 51 скрываются строки у таблицы с другим классом (не содержащим 51) + появляется возможность вернуть все строки показать все строки спасибо :) |
_Eldar_,
как назначить обработку клика? как получить все tr? как в цикле проверить каждую tr? как изменять стили программно? посмотреть как сделаны Открывашка добавить своё условие |
Цитата:
а что такое 232 - не знаю |
все получилось :) <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(); }); |
Открывашка 233 фильтрация строк таблицы
_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> </td></tr> <tr class='tr_55'><td>550</td><td> </td></tr> <tr class='tr_57'><td>570</td><td> </td></tr> <tr class='tr_51'><td>510</td><td> </td></tr> <tr class='tr_61'><td>610</td><td> </td></tr> <tr class='tr_51'><td>510</td><td> </td></tr> </table> <a href='#' id='51'>показать строки только 51</a><br> <a href='#' id='57'>показать строки только 57</a> </div> </body> </html> |
спасибо, как-то сложен пока для меня в понимании данный код,
когда общаешься со знающими людьми - то некоторые идеи сами в голову приходят да, заметил что мой код скрывает строки с нужным мне классом, хотя мне надо было их отобразить, добавил вначале все скрыть, а потом просто отобразить ссылки с нужным мне классом, т.к. не нашел селектора class 'не содержит 51' |
Или так
$('a').click(function () { $('tr:not([class=tr_' + this.id).toggle(); }) |
Часовой пояс GMT +3, время: 09:59. |