Как грамотно прописать существующий скрипт в тройном использовании?
Нашёл ,значит, подходящий скрипт для скрытия строк таблицы :
<table border="1">
<tr class="spoil">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
</table>
$(function(){
$('.spoil').click(function(){
$('.hide').toggle();
})
})
[style] table { width:600px; border:1px; } .hide { display:none; } [/style] Использовал,значит, данный код для скрытия строк по разделам таблицы -что то вроде фильтра, однако применил его к 5ти разделам -раскопипастил на 5 аналогичных скриптов с указанием порядковых номеров для классов spoil, hide в каждом скрываемом разделе( в первом скрипт с классами spoil1,hide1 ,во втором-spoil2,hide2 и т.д.). Наверно это ,как говорится,не по фэншую, поэтому вопрос-как прописать один единый код скрипта для 5ти(или более) пар классов? |
Цитата:
А ты про это еще не рассказал. И пример для этого не сделал... :no: |
:-?
Цитата:
|
Тут получается у вас что скрываемые строками являются все те hide которые прописаны после кликнутого spoil(nextAll), тоесть первый открывает все, второй все кроме первого , третий все-кроме первого и второго и тд. А как скрывать spoil1-hide1,spoil2-hide2 и тд?
|
JAMLIGHT,
не осилил но скорее всего вам нужно форум поиск открывашка |
просто скрипт нужен подобный но немного другой.типа фильтр строк
|
JAMLIGHT,
делайте макет и описание ... фильтраций для таблиц тоже много на форуме |
я полагаю должен быть аналогичный простой скрипт только с переменной для классов spoil и hide соответственно. макет я дал вполне рабочий правда с раскопированным скриптом для каждой пары классов
|
Цитата:
Цитата:
|
JAMLIGHT,
когда надоест перебрать варианты сделайте макет Цитата:
|
закономерность в порядковом номере для общей переменной
|
<table border="1">
<tr class="spoil1">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide1">
<td>скрытые</td>
<td>строки</td>
</tr>1
<tr class="hide1">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="spoil2">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide2">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide2">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="spoil3">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide3">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide3">
<td>скрытые</td>
<td>строки</td>
</tr>
</table>
Пропиши скрипт |
JAMLIGHT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
width:600px;
border:1px;
}
.hide {
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('.spoil').click(function(){
$(this).nextUntil('.spoil').toggle();
})
})
</script>
</head>
<body>
<table border="1">
<tr class="spoil">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="spoil">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="spoil">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide">
<td>скрытые</td>
<td>строки</td>
</tr>
</table>
</body>
</html>
|
тем что он скрывает ВСЕ строки с классом hide прописанные после кликнутой строки с классом spoil. А надо не все, а определённые. Тобишь надо чтобы spoil1 скрывал Hide1, spoil 2-Hide2 и тд Для этой цели я прописал 5 скриптов,но это не дело сами понимаете
|
JAMLIGHT,
смотрите макет выше. |
К примеру мне надо разворачивающиеся строки в таблице с городами со средним заработком. Например Средний заработок 10 000 рублей-Разворачивается(скрываетс ) 5 городов. Средний заработок 15 000 Руб-7 городов. А если у меня этих средних заработков в таблице 50 штук я что 50 аналогичных скриптов буду в код писать? . Если так копипастить скрипт то он займёт больше разметки
\Спасибо щас потестю |
JAMLIGHT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
width:600px;
border:1px;
}
[class*="hide"] {
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('.spoil').click(function(){
var cls = $(this).data("cls")
$(cls).toggle();
})
})
</script>
</head>
<body>
<table border="1">
<tr class="spoil" data-cls=".hide1">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide1">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide1">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="spoil" data-cls=".hide2">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide2">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide2">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="spoil" data-cls=".hide3">
<td>можно</td>
<td>развернуть</td>
</tr>
<tr class="hide3">
<td>скрытые</td>
<td>строки</td>
</tr>
<tr class="hide3">
<td>скрытые</td>
<td>строки</td>
</tr>
</table>
</body>
</html>
|
То что надо. Ценю
|
а чем эти 2 варианта отличаются?
|
JAMLIGHT,
:blink: тем что для второго варианта пост№17 неважно где будут находится открываемые строки |
вижу. второй вариант более гибкий . Грамотно. спасибо. вставлю код себе на сайт. Можете подписать автора
|
Потестил я эти варианты- не подходят потому что мне надо чтобы скрывающим элементом по клику была не строка а ячейка
|
<table border="1" >
<thead>
<tr>
<th colspan="6">
<table><thead><tr>
<td>Надо развернуть1</td>
<td>Надо развернуть2</td>
<td>Надо развернуть3</td>
<td>Надо развернуть4</td>
<td>Надо развернуть5</td>
<td>Надо развернуть6</td>
</tr></thead></table>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 1</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 2</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 3</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 4</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 5</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 6</th>
</tr>
</tbody>
</table>
|
Как для такой таблицы прописать скрипт?
|
JAMLIGHT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.content tr {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.toggle td').click(function(){
var i = $('.toggle td').index(this);
$('.content tr').eq(i).toggle();
})});
</script>
</head>
<body>
<table border="1" >
<thead>
<tr>
<th colspan="6">
<table><thead><tr class="toggle">
<td>Надо развернуть1</td>
<td>Надо развернуть2</td>
<td>Надо развернуть3</td>
<td>Надо развернуть4</td>
<td>Надо развернуть5</td>
<td>Надо развернуть6</td>
</tr></thead></table>
</th>
</tr>
</thead>
<tbody class="content">
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 1</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 2</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 3</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 4</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 5</th>
</tr>
<tr>
<th>Ск</th>
<th>ры</th>
<th>та</th>
<th>я ст</th>
<th>рок</th>
<th>а 6</th>
</tr>
</tbody>
</table>
</body>
</html>
|
Проблема в том, что мне надо чтобы класс по которому строка скрывается присваивалась конкретно строке а не body таблицы, так как скрываемых строк может быть много. Тут видать через индекс первая ячейка шапки открывает первую строку тела таблицы. А надо чтобы каждая ячейка шапки открывала группу строк с одним соответствующим классом. Таблица у меня будет не из 6 ти строк
|
JAMLIGHT,
у вас уже достаточно примеров, чтобы сделать то что вам нужно. далее раздел работа |
спасибо за решения
|
| Часовой пояс GMT +3, время: 15:44. |