Question

我试图使用Bootstrap使行可点击，但我发现的只是列表。有办法做到这一点吗？

我写了这个：

    <table class="table table-hover">
      <tr>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr><a href="user/student">
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

但它没有用。

Answer 1

为什么不简单地附加onclick这样的事件：

<table class="table table-striped">
      <tr onclick="window.location.href = 'url';">>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr onclick="window.location.href = 'url';">
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

注意：我建议你使用jQuery作为bootstrap也使用jQuery。

Answer 2

不要把锚放在嵌套的tr中。这不是一个正确的用途。相反，使用

onclick="getElementById('edit-1').click()"

并添加

style="cursor: pointer"

<table class="table table-hover">
 <tr>
    <td><strong>FirstName</strong></td>
    <td><strong>LastName</strong></td>
    <td><strong>Start</strong></td>
    <td><strong>End</strong></td>
  </tr>
  <tr onclick="getElementById('edit-1').click()" style="cursor: pointer">
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <td><a href="url-here" id="edit-1">dddd</a></td>                            
  </tr>

Answer 3

你也可以同时添加一个函数;

 $("tr").click(function(){
     // your click time codes...
 });

table-hover类只添加行颜色更改属性。不要点击功能定义！

Answer 4

所以你希望能够导航到另一个页面。如果您打算按照评论中的说明转到另一个页面，则可能需要使用location.href = url。如果单击任何一行，第一个解决方案将起作用。

 <table class="table table-hover">
      <tr>
        <td><strong>FirstName</strong></td>
        <td><strong>LastName</strong></td>
        <td><strong>Start</strong></td>
        <td><strong>End</strong></td>
      </tr>
      <tr><a>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>                            
      </a></tr>
</table>

$("row").click(function(){
    //to navigate to another page
    location.href = 'user/student';//the other page's url
 });

实现此目的的另一种方法是使用特定行中的onclick。如果单击具有onclick的特定行，此解决方案将起作用。

<table class="table table-hover">
          <tr onclick="location.href='user/student';">
            <td><strong>FirstName</strong></td>
            <td><strong>LastName</strong></td>
            <td><strong>Start</strong></td>
            <td><strong>End</strong></td>
          </tr>
          <tr><a>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>                            
          </a></tr>
    </table>

另一种方法是给行一个id并使用js或jquery来选择那个id并导航到你想要的页面如下：

 <table class="table table-hover">
          <tr id="row1">
            <td><strong>FirstName</strong></td>
            <td><strong>LastName</strong></td>
            <td><strong>Start</strong></td>
            <td><strong>End</strong></td>
          </tr>
          <tr><a>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>                            
          </a></tr>
    </table>
    //now you can use this to navigate

$('#row1').on('click', function(){
     window.location = "user/student";    
});

Answer 5

我遇到了同样的问题我这样解决了：

1 - 在您的表格中输入ID：

＆＃34; tbListaFiadores＆＃34;

2 - 使用以下内容配置您的表格：

clickToSelect：true，

3 - 获取点击事件：

$（＆＃39;＃tbListaFiadores＆＃39;）。on（＆＃39; click-row.bs.table＆＃39;，function（e，row，   $元）{
  console.log（＆＃34; onClickRow normal＆＃34;）;
  }）;

Answer 6

我看到的最简洁的方法是使用jasny bootstrap component

将.js文件导入项目

穿上tbody：

 <tbody data-link="row" class="rowlink hand-cursor">

在第一个 td 元素上添加 a 元素
```
 <a href="#path"> path </a> 
```
现在链接已经在运行了。要使其丰富，请使用此css文件及其类：

<强> CSS

.hand-cursor { 
cursor: pointer; 
cursor: hand; 
}

.table-hoverplus>tbody>tr:hover>td {
 background-color: #eeeeee;
}

如何使用Bootstrap在表中创建可点击的行？

6 个答案: