4

私のHTMLページには、行が少ないテーブルがあります.行をクリックすると、ページを別のHTMLページにリダイレクトする必要があります.jqueryを使用してこれを実行する方法.

注:データの各行を個別の html ページにリダイレクトする必要があります。たとえば、最初の行のデータは user1 プロファイルの 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>
4

4 に答える 4

6

このようなものを試して、以下のようなデータ属性を使用してください

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/

于 2013-11-07T06:02:08.807 に答える
1

window.location.hrefを使用してみてください

$('table tr').on('click', 'td', function () {
   window.location.href = "redirect url";
})
于 2013-11-07T05:42:22.280 に答える
0

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');
});

JavaScript で URL をリダイレクトする 5 つの方法を読む

于 2013-11-07T05:42:42.677 に答える