Question

function func(id) 
    {

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

            });
        });
        return false;
        }

我试图隐藏与点击按钮对应的列。但是这个代码获得了一些意想不到的输出，就像单击一个按钮时隐藏的列一样。我哪里错了？

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

Answer 1

更简单的方法是在列td中添加一个类。我为每个td添加了课程col1和col2。

小提琴：http://jsfiddle.net/tbpMX/

代码：

$(".toggle").click(function() {
    $(this).parent().hide();
    $(".col" + $(this).attr("id")).hide();
});

Answer 2

您不需要点击html来调用该功能。

在你的jquery中你可以拥有：

$("#1,#2").click(function(){
$(this).find("td").hide();
});

编辑：

这个没有求助于给列添加id名称：

$(document).ready(function(){
$("#1,#2").click(function(){
    var colid=$(this).prop("id");
    $("tr").children().each(function(){
        if (colid==1)
        {
           $(this).closest("td:nth-child(1),th:nth-child(1)").hide();                
        }
        else
        {
            $(this).closest("td:last-child,th:last-child").hide();
        }

    });
});

}）;

这是实际的fiddle。

尝试使用jQuery隐藏html表的列

2 个答案: