使用Javascript单击按钮或图像时,表列折叠

时间:2013-09-29 11:09:14

标签: javascript jquery html-table

我有这个功能,负责使表tr和th崩溃。我想在单击按钮时折叠表列。我想是因为我正在使用$('tr th'),click(function()所以当我点击th中的任何地方时它都会崩溃。当我们点击像(function myFunction(){})这样的按钮或图像时,我想要折叠。

这是我的代码:

$(window).load(function(){
$(function() {
    $('table tbody tr:odd').addClass('alt');

    $('table tbody tr').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

$('tr th:not(:eq(0),:eq(1),:eq(2),:eq(3),:eq(4),:eq(5))').click(function() {

    var index = (this.cellIndex + 1);
    var cells = $('table tr > :nth-child(' + index + ')');
    cells.toggleClass('collapsed');

    if ($(this).hasClass('collapsed')) {
        $(this).find('span').html('<b>+</b>');
    }
    else {
        $(this).find('span').html('<b>-</b>');
    }

    if ($('table tr > th:not(.collapsed)').length)
        $('table').removeClass('collapsed');
    else
        $('table').addClass('collapsed');
});
});

1 个答案:

答案 0 :(得分:1)

为什么不在按钮上添加onclick事件而不是使用jquery添加单击侦听器。
你可以做点什么

<button type="button" onclick="toggleExpand('anyReqParam1', 'anyReqParam2')" class="toggle"></button>

并在脚本中定义函数

<script>
  function toggleExpand(anyReqParam1, anyReqParam2) {
     // toggle code goes here
  }
</script>

或者您也可以

$(".toggle").click(function() {

});

使用JQuery。这里 toggle 是我给按钮

的类名