0

単純な jQuery 折りたたみ可能なテーブルがあります。ヘッダー行は、表示/非表示するデータを切り替えるトリガーです。

私が求めているのは、行自体ではなく、ヘッダー行内に画像を配置し、これをトリガーとして使用することです。

以下に例を示します: http://jsfiddle.net/RDybT/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('#trigger_1').click(function () { 
          $('#toggle_1', $(this).parent()).toggle();
       });
    $('#trigger_2').click(function () { 
          $('#toggle_2', $(this).parent()).toggle();
       });
     });
</script>

</head>

<body>
<img src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/blue/toggle-expand_blue.png" id="trigger_1"/>
<table border="2" cellpadding="2" cellspacing="2">
    <tr>
        <th>Header </th>
    </tr>
    <tr id="toggle_1">
        <td>Data</td>
    </tr>
</table>

<hr>

<table border="2" cellpadding="2" cellspacing="2">
    <tr>
        <th><img src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/blue/toggle-expand_blue.png" id="trigger_2"/></th>
    </tr>
    <tr id="toggle_2">
        <td>Data</td>
    </tr>
</table>
</body>
</html>

いろいろ調べたのですが、可能かどうかわかりませんか？

どんなアイデアやヒントも素晴らしいでしょう。

ありがとう

4

3 に答える 3

0

thead / tbody を使用したり、画像をアンカーでラップしたりするなど、いくつかのより良い方法で更新しました。

しかし、ボタンがヘッダー内にある場合、再度クリックすることはできません。それはあなたが意図したことですか、それとも私が誤解していますか?

http://jsfiddle.net/t4b7X/

$(document).ready(function() {
    $('.table-toggle').click(function(event) { 
          $(this).closest('thead').toggle();
          event.preventDefault();
    });
});
于 2013-05-14T09:11:06.327 に答える
0

これを試して ：

$(document).ready(function() {
    $('#trigger_1').click(function () { 
      $('#toggle_1', $(this).parent()).toggle();
   });
$('#trigger_2').click(function () { 
      $('#toggle_2').toggle();
   });
 });
于 2013-05-14T09:06:20.040 に答える