Я ищу способ развернуть / свернуть все строки таблицы одним щелчком мыши.Вот код, который работает для меня, но только для одной строки за раз.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">
.a {
border-bottom: 2px solid grey;
}
</style>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr.a").addClass("odd");
$("#report tr.b").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
</head>
<body>
echo "<table id='report'><caption class='captionpersonal'> All available trainings</caption>";
echo "<tr>";
echo "<th></th><th>Training</th><th>Level</th></tr>";
echo "</tr><tr class='a'>"; <----------------------------- clicking on row will expand hidden row
echo "<td><div class='arrow'></div></td>";
echo "</tr><tr class='b'>"; <-------------------------- row that is hidden
?>
</body>
</html>
Я удалил некоторый код, чтобы он был более читабельным.
Так чего я хотел бы достичьэто добавить кнопку в TableHead и щелкнуть по ней, чтобы развернуть / свернуть все строки таблицы - те, которые с class = b.
Любая помощь будет высоко ценится.