如何使引导表行可点击？ [复制]

Posted 2023-03-05

【中文标题】如何使引导表行可点击？ [复制]

【英文标题】：How do I make bootstrap table rows clickable? [duplicate]

【发布时间】：2012-04-17 15:56:38

【问题描述】：

我可以自己破解这个，但我认为 bootstrap 有这个功能。

【问题讨论】：

它们已经可以点击了。您希望他们在点击时做某事吗？如果有，是什么？

【参考方案1】：

使用 jQuery 非常简单。 v2.0 在所有表上使用table 类。

$('.table > tbody > tr').click(function() 
    // row was clicked
);

【讨论】：

如果您只想将点击事件绑定到表格正文行，请使用 '.table > tbody > tr' 选择器。

如何对特定表执行此操作？就像我有 3 个表，我想在一个表行上绑定点击事件，那么我该怎么做呢

@MuneemHabib 只需将 id 添加到该表并使用 id 选择器 $('#my_id > tbody > tr')

使用.on('click', function()); 而不是.click

@MaHo 也许你能说明为什么？

【参考方案2】：

有一个javascript plugin 将此功能添加到引导程序。

当包含rowlink.js 时，您可以：

<table data-link="row">
  <tr><td><a href="foo.html">Foo</a></td><td>This is Foo</td></tr>
  <tr><td><a href="bar.html">Bar</a></td><td>Bar is good</td></tr>
</table>

表格将被转换，以便可以点击整行而不是只点击第一列。

【讨论】：

用你的叉子做得很好。请针对此问题调整如何使用 twitter-bootstrap 和您的引导版本的示例。

同时包含bootstrap.css 和jasny-bootstrap.css 并加载jasny-bootstrap.js。 rowlink的使用见jasny.github.io/bootstrap/javascript/#rowlink

似乎接受的答案更简单，因为大多数项目已经使用 jQuery。为什么在这里加倍赞成。无意冒犯，只是想了解为什么这个解决方案更好？

@buffer 这个小插件还处理触发链接的点击和设置行样式以使其清楚地用作链接。当然，这是很多开发人员可以轻松创建自己的微不足道的事情。 Bootstrap 的 Collapse 和 Button 插件也是如此。

@Jasny-ArnoldDaniels - 您在jasny.github.io/bootstrap/javascript/#rowlink 上的示例只有第一列可使用 Chrome 进行点击...似乎无法正常工作

【参考方案3】：

该代码将任何设置了data-href 属性的引导表行转换为可点击元素

注意：data-href 属性是有效的 tr 属性 (HTML5)，而 tr 元素上的 href 属性则不是。

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

【讨论】：

好答案。像魅力一样工作！

出色的解决方案，谢谢

【参考方案4】：

我用模态窗口向你展示我的例子......你创建你的模态并给它一个 id 然后 在您的表格中，您有 tr 部分，只需添加您在下面看到的第一行（不要忘记像这样在第一行设置

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>                                                                                                                                                                                   

【讨论】：

太棒了！这对我来说非常适合模态。

【参考方案5】：

<tr  onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">

【讨论】：

-1 这种方法已经很老了，并不是最好的。 Javastript 应该是不显眼的，这意味着不应该与 html 混合。

是的，但你猜怎么着？我不必加载另一个笨重的 JS 插件或在 jquery 回调中进行属性检查。

你仍然可以在不混合 js 和 html 的情况下使用纯 javascript 来做到这一点

【参考方案6】：

可能是您在单击表格行时尝试附加一个函数。

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) 
    rows[i].onclick = functioname(); //call the function like this

【参考方案7】：

您可以使用 bootstrap css 以这种方式使用。如果已经分配给任何行，只需删除活动类并重新分配给当前行。

    $(".table tr").each(function () 
        $(this).attr("class", "");
    );
    $(this).attr("class", "active");