Javascript 如何使引导表可单击_Javascript_Html_Twitter Bootstrap

Javascript 如何使引导表可单击

javascript html twitter-bootstrap

Javascript 如何使引导表可单击,javascript,html,twitter-bootstrap,Javascript,Html,Twitter Bootstrap,我在main.html页面中有这样一个引导程序： <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">

我在main.html页面中有这样一个引导程序：

<table class="table table-striped">
 <thead>
    <tr>
     <th scope="col">#</th>
     <th scope="col">First</th>
     <th scope="col">Last</th>
     <th scope="col">Handle</th>
   </tr>
 </thead>
 <tbody>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
 </tr>
 <tr>
   <th scope="row">2</th>
   <td>Jacob</td>
   <td>Thornton</td>
   <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>
</tbody>
</table>


#
弗斯特
最后
手柄
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特

我的要求是：

当我点击表格的任何一行时（无论是文本还是两列之间的空格），它都必须重定向到另一个Html页面

我如何才能做到这一点？

可以使用jQuery完成。单击TR绑定事件侦听器，然后根据需要重定向用户

你的HTML

<table class="table table-striped">
 <thead>
    <tr>
     <th scope="col">#</th>
     <th scope="col">First</th>
     <th scope="col">Last</th>
     <th scope="col">Handle</th>
   </tr>
 </thead>
 <tbody>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
 </tr>
 <tr>
   <th scope="row">2</th>
   <td>Jacob</td>
   <td>Thornton</td>
   <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>
</tbody>
</table>

纯JavaScript

var table = document.getElementById('js-table');
for(var i = 0; i < table.rows.length; i++) {
  table.rows[i].addEventListener('click', function() {
    document.location.href = "https://google.com"
  });
}

var table=document.getElementById（'js-table'）；
对于（var i=0；i

试试这段代码
<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <table class="table table-striped" id="tableId">
     <thead>
        <tr>
         <th scope="col">#</th>
         <th scope="col">First</th>
         <th scope="col">Last</th>
         <th scope="col">Handle</th>
       </tr>
     </thead>
     <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
     </tr>
     <tr>
       <th scope="row">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
    </table>

    <script>
        function addRowHandlers() {
            var table = document.getElementById("tableId");
            var rows = table.getElementsByTagName("tr");
            for (i = 0; i < rows.length; i++) {
                var currentRow = table.rows[i];
                var createClickHandler = 
                    function(row) 
                    {
                        return function() { 
                                                var cell = row.getElementsByTagName("td")[0];
                                                var id = cell.innerHTML;
                                                alert("id:" + id);
                                                window.location.href = "http://www.w3schools.com";
                                         };
                    };

                currentRow.onclick = createClickHandler(currentRow);
            }
        }
        window.onload = addRowHandlers();
    </script>
    </body>
    </html>


文件
#
弗斯特
最后
手柄
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
函数addRowHandlers（）{
var table=document.getElementById（“tableId”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=0；i
您也可以通过在tr上使用Javascript（内联）来实现这一点：


通过这种方式，您可以为不同的行设置不同的链接。请检查以下更新的HTML代码段：
<table class="table table-striped">
 <thead>
    <tr>
     <th scope="col">#</th>
     <th scope="col">First</th>
     <th scope="col">Last</th>
     <th scope="col">Handle</th>
   </tr>
 </thead>
 <tbody>
  <tr onclick="document.location = 'http://www.google.com';">
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
 </tr>
 <tr onclick="document.location = 'http://www.himanshu.com';">
   <th scope="row">2</th>
   <td>Jacob</td>
   <td>Thornton</td>
   <td>@fat</td>
</tr>
<tr onclick="document.location = '/links.html';">
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>
</tbody>
</table>


#
弗斯特
最后
手柄
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
请在下面找到代码，单击任何行（标题行除外）将重定向到另一个链接
在表体中的所有行上添加click事件并执行任务

$（函数（）{
$（'tbody tr'）。单击（函数（）{
window.location.href=https://www.google.com';
})
})
首先，我建议将类添加到
标记中（这样，如果您计划在页面中有多个表，它不会影响其他表）
然后，我假设您使用jquery，并且您有动态表行
#.link is the class <tr class="link" data-href="https://google.com">...</tr>
#:not(a) => added this so you can add other link `<a>` to your row (remove it if not needed...)

// same page redirect
$(document).on('click', 'tr.link:not(a)', function(e){
  e.stopPropagation(); // only add this if you have <a> tag in row
  window.location.href = $(this).data('href'); // dynamic link
});

// new tab redirect
$(document).on('click', 'tr.link', function(){
  $('<a href="'+ $(this).attr('data-href') +'" target="_blank">External Link</a>')[0].click();
});

。\link是类。。。
#：not（a）=>添加了此链接，以便您可以添加其他链接“）[0]。单击（）；
});
我们可以用javascriptsure完成吗。我已经编辑了答案并为其添加了代码。您需要向表中添加id。
<table class="table table-striped">
 <thead>
    <tr>
     <th scope="col">#</th>
     <th scope="col">First</th>
     <th scope="col">Last</th>
     <th scope="col">Handle</th>
   </tr>
 </thead>
 <tbody>
  <tr onclick="document.location = 'http://www.google.com';">
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
 </tr>
 <tr onclick="document.location = 'http://www.himanshu.com';">
   <th scope="row">2</th>
   <td>Jacob</td>
   <td>Thornton</td>
   <td>@fat</td>
</tr>
<tr onclick="document.location = '/links.html';">
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>
</tbody>
</table>

#.link is the class <tr class="link" data-href="https://google.com">...</tr>
#:not(a) => added this so you can add other link `<a>` to your row (remove it if not needed...)

// same page redirect
$(document).on('click', 'tr.link:not(a)', function(e){
  e.stopPropagation(); // only add this if you have <a> tag in row
  window.location.href = $(this).data('href'); // dynamic link
});

// new tab redirect
$(document).on('click', 'tr.link', function(){
  $('<a href="'+ $(this).attr('data-href') +'" target="_blank">External Link</a>')[0].click();
});