2017-01-07 25 views
0

我正在尝试使表中的整行(tr)可点击。下面是代码我已经厌倦了,如何使整个<tr>行在laravel中可点击?

<table class="container"> 
    <thead> 
     <tr> 
     <th><h1>Id</h1></th> 
     <th><h1>Number</h1></th> 
     <th><h1>Type</h1></th> 
     <th><h1>Value</h1></th> 
     </tr> 
    </thead> 
    <tbody> 
     @for ($i = 0; $i < $count; $i++) 
     <tr class="table-tr" data-url="http://www.engineering.us/gena/details.php">  
      <td>{{ $data_array[$i]['id'] }}</td> 
      <td>{{ $data_array[$i]['number'] }}</td> 
      <td>{{ $data_array[$i]['name'] }}</td> 
      <td>{{ $data_array[$i]['value'] }}</td>  
     </tr> 
@endfor  
</tbody> 

`

而且JS脚本,

<script type="text/javascript"> 
    $(function() { 
    $(".container").on("click", "tr[data-url]", function() { 
     window.location = $(this).data("url"); 
    }); 
    }); 
</script> 

这是行不通的。请告诉我们如何做到这一点。

感谢提前:)

+0

'。对( “点击”, “表-TR”)'? –

+0

'$(“table.container tbody tr”)。click(function(){' –

+0

感谢您的建议,它不是在工作的朋友,我在控制台也没有任何错误 – Haripriya

回答

1

$(function() { 
 
    $('table.container').on("click", "tr.table-tr", function() { 
 
    window.location = $(this).data("url"); 
 
    //alert($(this).data("url")); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="container"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <h1>Id</h1></th> 
 
     <th> 
 
     <h1>Number</h1></th> 
 
     <th> 
 
     <h1>Type</h1></th> 
 
     <th> 
 
     <h1>Value</h1></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="table-tr" data-url="http://www.engineering.us/gena/details.php"> 
 
     <td>id</td> 
 
     <td>number</td> 
 
     <td>manash</td> 
 
     <td>28</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

+0

它的工作..非常感谢:) – Haripriya

+0

@Haripriya米很高兴它的工作 – msonowal