Question

在我的html页面中，我有一个几行的表。如果我点击一行，我需要将页面重定向到另一个html页面。如何使用jquery执行此操作。

注意：我需要将每行数据重定向到不同的html页面。例如，第一行数据应该重定向到user1 profile html page。第二行数据应该重定向到user2 profile html页面。

<table class="table">

    <tbody>
            <tr>
            <td>user 1</td>
            <td>10/21/2013</td>
            <td class="text-primary">Open</td>
            <td>$79.99</td>
            <td>Amazing Widget (16 GB, White)</td>
            <td>Johnathan</td>
            <td class="text-right none"> <a href="#" class="tick_icon gridneed_icon"></a>
 <a class="col-md-offset-1 cross_icon gridneed_icon" data-toggle="modal" href="#deleteproduct"></a>

            </td>
        </tr>
        <tr>
            <td>user 2</td>
            <td>6/21/2013</td>
            <td class="text-primary">Open</td>
            <td>$79.99</td>
            <td>Amazing (16 GB, White)</td>
            <td>Doe</td>
            <td class="text-right none"> <a href="#" class="tick_icon gridneed_icon"></a>
 <a class="col-md-offset-1 cross_icon gridneed_icon" data-toggle="modal" href="#deleteproduct"></a>

            </td>
        </tr>
    </tbody>
</table>

Answer 1

尝试这样的事情，使用类似下面的数据属性

HTML CODE

<table class="table">
    <tbody>
        <tr data-url="some_url1">
            <td>39401602</td>
            <td>6/21/2013</td>
            <td class="text-primary">Open</td>
            <td>$79.99</td>
            <td>Amazing Widget (16 GB, White)</td>
            <td>Johnathan Doe</td>
            <td class="text-right none"> <a href="#" class="tick_icon gridneed_icon"></a>
    <a class="col-md-offset-1 cross_icon gridneed_icon" data-toggle="modal" href="#deleteproduct"></a>

            </td>
        </tr>
        <tr data-url="some_url2">
            <td>39401602</td>
            <td>6/21/2013</td>
            <td class="text-primary">Open</td>
            <td>$79.99</td>
            <td>Amazing Widget (16 GB, White)</td>
            <td>Johnathan Doe</td>
            <td class="text-right none"> <a href="#" class="tick_icon gridneed_icon"></a>
    <a class="col-md-offset-1 cross_icon gridneed_icon" data-toggle="modal" href="#deleteproduct"></a>

            </td>
        </tr>
    </tbody>
</table>

JAVASCRIPT CODE

$(function () {
    $('table.table tr').click(function () {
        window.location.href = $(this).data('url');
    });
})

<强>参考

数据属性 - http://api.jquery.com/data/

Answer 2

尝试使用window.location.href

$('table tr').on('click', 'td', function () {
   window.location.href = "redirect url";
})

Answer 3

<强> HTML

<table class="table">
        <tbody>
                <tr data-link="url1"> ... </tr>
                <tr data-link="url2"> ... </tr>
        <tbody>
</table>

js .data()

$('table.table tr').click(function(){
   window.location.href = $(this).data('link');
});

阅读5 ways to redirect URL with Javascript

Answer 4

你能试试吗，

jquery的：

                $("tr").click(function(){

                        window.location.href=$(this).attr('link');
                });

HTML：

            <table class="table">

                <tbody>
                        <tr  link="http://google.com">
                        <td>user 1</td>
                        <td>6/21/2013</td>
                        <td class="text-primary">Open</td>
                        <td>$79.99</td>
                        <td>Amazing Widget (16 GB, White)</td>
                        <td>Johnathan Doe</td>
                        <td class="text-right none"> <a href="#" class="tick_icon gridneed_icon"></a>
             <a class="col-md-offset-1 cross_icon gridneed_icon" data-toggle="modal" href="#deleteproduct"></a>

                        </td>
                    </tr>
                    <tr link="http://stackoverflow.com">
                        <td>user 2</td>
                        <td>6/21/2013</td>
                        <td class="text-primary">Open</td>
                        <td>$79.99</td>
                        <td>Amazing Widget (16 GB, White)</td>
                        <td>Johnathan Doe</td>
                        <td class="text-right none"> <a href="#" class="tick_icon gridneed_icon"></a>
             <a class="col-md-offset-1 cross_icon gridneed_icon" data-toggle="modal" href="#deleteproduct"></a>

                        </td>
                    </tr>
                </tbody>
            </table>

在新窗口中打开

                $("tr").click(function(){
                        //window.location.href=$(this).attr('link');
                        var url = $(this).attr('link');
                        window.open(url,'_blank');
                });

单击表行数据应使用jquery重定向到html页面

4 个答案: