вижу. второй вариант более гибкий . Грамотно. спасибо. вставлю код себе на сайт. Можете подписать автора
|
Потестил я эти варианты- не подходят потому что мне надо чтобы скрывающим элементом по клику была не строка а ячейка
|
<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, время: 14:09. |