Bootstrap 表格行可点击行中的按钮 [英] Bootstrap table row clickable with buttons in row

问题描述

我有一些想要点击的表格行.

我知道怎么做，但现在我遇到了行内按钮的问题.

问题是，当我点击按钮时，它会打开父行的链接.

JS:

$('.table tr.row-link').each(function(){$(this).css('cursor','pointer').hover(功能(){$(this).addClass('active');},功能(){$(this).removeClass('active');}).click(函数(){document.location = $(this).attr('data-href');});});

一行的 HTML:

<td style="text-align: right;"><div class="btn-group"><button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"></span>编辑<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切换下拉菜单</span></button><ul class="dropdown-menu" role="menu"><li><a href="打开"><span class="glyphicon glyphicon-eye-open"></span>打开</a><li><a href="关闭"><span class="glyphicon glyphicon-eye-close"></span>关闭</a>

</td></tr>

这一切都在 Bootstrap 和 jQuery 中.有人可以帮我吗?

解决方案

我将 row-click 类添加到单元格 (td's) 并排除了按钮所在的最后一个单元格.现在一切正常.不需要 stopPropagation().我从 row 中删除了 row-link 类并将其添加到必要的单元格中，然后将 JS 重建为:

$('.table td.row-link').each(function(){$(this).css('cursor','pointer').hover(功能(){$(this).parent().addClass('active');},功能(){$(this).parent().removeClass('active');}).click(函数(){document.location = $(this).parent().attr('data-href');});});

I have some table rows which I want to be clickable.

I found out how to do that but now I have a problem with buttons within the row.

The problem is that when I click on the button it opens the link of the parent row.

JS:

$('.table tr.row-link').each(function(){
    $(this).css('cursor','pointer').hover(
        function(){ 
            $(this).addClass('active'); 
        },  
        function(){ 
            $(this).removeClass('active'); 
        }).click( function(){ 
            document.location = $(this).attr('data-href'); 
        }
    );
});

HTML of one row:

<tr class="row-link" data-href="www.google.com">
    <td style="text-align: right;">
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="open">
                        <span class="glyphicon glyphicon-eye-open"></span> Open
                    </a>
                </li>
                <li>
                    <a href="close">
                        <span class="glyphicon glyphicon-eye-close"></span> Close
                    </a>
                </li>
            </ul>
        </div>
    </td>
</tr>

It's all with Bootstrap and jQuery. Can someone help me?

解决方案

I added the row-click class to the cells(td's) and excluded the last cell where the buttons are. Now everything works fine. No need for stopPropagation(). I removed row-link class from row and added it to the necessary cells and I've rebuild the JS to:

$('.table td.row-link').each(function(){
    $(this).css('cursor','pointer').hover(
        function(){ 
            $(this).parent().addClass('active'); 
        },  
        function(){ 
            $(this).parent().removeClass('active'); 
        }).click( function(){ 
            document.location = $(this).parent().attr('data-href'); 
        }
    );
});

这篇关于Bootstrap 表格行可点击行中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！