2 
function func(id) 
    {

        $(document).ready(function () 
        {
            $(".toggle").click(function () 
            {
                $("td:nth-child(" + id + ")>div").toggle();

            });
        });
        return false;
        }

クリックされたボタンに対応する列を非表示にしようとしています。しかし、このコードでは、1 つのボタンをクリックすると両方の列が非表示になるなど、予期しない出力が得られます。どこが間違っていますか？

<table border="1">
<tr>
 <th><button class="toggle" id="1" onclick="return func(this.id);" >hide</button></th>
  <th><button class="toggle" id="2" onclick="return func(this.id);" >hide</button></th>
  </tr>
  <tr>
  <td> <div>row 1, cell 1</div></td>
  <td><div>row 1, cell 2</div></td>
  </tr>
  <tr>
  <td><div>row 2, cell 1</div></td>
  <td> <div>row 2, cell 2</div></td>
  </tr>
  </table>
4

2 に答える 2

1

これを行う簡単な方法は、クラスを列に追加することtdです。私はあなたのtdのそれぞれにクラスcol1とを追加しました。col2

フィドル: http://jsfiddle.net/tbpMX/

コード：

$(".toggle").click(function() {
    $(this).parent().hide();
    $(".col" + $(this).attr("id")).hide();
});
于 2013-05-08T13:50:37.603 に答える