скрыть с другим классом 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_, где скрипт?
|
_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, время: 16:24. |