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

Question

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

注意:我需要将每一行数据重定向到不同的 html 页面。例如，第一行数据应重定向到 user1 个人资料 html 页面。第二行数据应重定向到 user2 个人资料 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 代码

<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 代码

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

引用

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