Развернуть / свернуть все строки таблицы при нажатии - PullRequest
0 голосов
/ 09 февраля 2012

Я ищу способ развернуть / свернуть все строки таблицы одним щелчком мыши.Вот код, который работает для меня, но только для одной строки за раз.

<!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.

Любая помощь будет высоко ценится.

Ответы [ 3 ]

0 голосов
/ 09 февраля 2012

Вы пробовали $(this).parent().children("tr").show();, это переключило бы все ваши tr в фактическую таблицу.

0 голосов
/ 10 февраля 2012

Благодаря Томасу Клейсону все прекрасно работает.

Вот полный код на тот случай, если кому-то это интересно.

Все строки раскрываются / сворачиваются одним щелчком, а также отдельные строки, а такжеизменения изображения для отдельных строк и при развертывании всех.

<!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">
            #report { border-collapse:collapse; width: 100%; height: 100%; border-top:thick double #DCDCDC;}
        #report th { background: #d1cfd0; padding: 3px 10px; border-bottom: 2px solid #DCDCDC;}
        #report td { text-align: center; padding: 3px 10px; background: #E2E4FF;}
        #report tr.odd td { background: white; cursor:pointer;}
        #report div.arrow { background:transparent url(images/details_open.png) no-repeat; width:20px; height:20px; display:block;}
        #report div.up { background:transparent url(images/details_close.png) no-repeat;}
    .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");

            });

            $('#click_for_show_all').click(function(){
  // see if they are all shown
  var children = $('#report tr.b').length;
  var visibleChildren = $('#report tr.b:visible').length;
  if(children == visibleChildren) { // all the trs are shown
    $('#report tr.b').hide();
    $(this).find(".arrow").toggleClass("up");
    $("#report tr.odd").find(".arrow").toggleClass("up");
     // hide all b rows
  }
  else {
    $('#report tr.b').show();
    $(this).find(".arrow").toggleClass("up"); // shows all
    $("#report tr.odd").find(".arrow").toggleClass("up");
  }
});

        });
    </script> 

</head>
<body>




echo "<table id='report'><caption class='captionpersonal'> All available trainings</caption>";
echo "<tr>";
echo "<th><div id='click_for_show_all'><div class='arrow'></div></div>/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>
0 голосов
/ 09 февраля 2012

Добавить кнопку:

<button id="click_for_show_all">Show/Hide all</button>

И затем код для отображения:

$('#click_for_show_all').click(function(){
  // see if they are all shown
  var children = $('#report tr.b').length;
  var visibleChildren = $('#report tr.b:visible').length;
  if(children == visibleChildren) { // all the trs are shown
    $('#report tr.b').hide(); // hide all b rows
  }
  else {
    $('#report tr.b').show(); // shows all
  }
});
...