0

私はこれに苦労したので、どんな助けも大歓迎です。jquery replaceWith 関数を使用して、グリッド (div) とテーブルの間のトグルを作成しました。これはうまく機能しますが、私の問題は、クリックするたびに各要素の特定のリンクを一定に保つことにあります。

添付の例では、項目を replaceWith 関数に追加しましたが、目的の要素の外側にレンダリングされます。たとえば、リンクが最初に存在する TR または Div にリンクを残したいとします。レンダリングすると、リンクは Table/Div 要素の外側にレンダリングされます。

例： 

<table class="toggle" style="display: table;">
    <tbody>
    <tr class="table-head">  <--- LINK SHOULD BE HERE --->  <th>Title</th><th>Date</th><th>Info</th></tr><tr><td>Class Title</td><td>Item Details</td><td>Item Details</td></tr>
    </tbody>
</table>

うまくいけば、誰かが答えられるようにこれを十分に説明しました。

http://jsfiddle.net/rymill2/R3J5m/

JS:

$btnTable = ".button-table";
$btnGrid = ".button-grid";
$table = "table.toggle";
$grid = ".grid";
$link = "a.grid-link";

if ($($table).length > 0) {    
    $($btnTable).addClass('active');
} else {
    $($btnTable).removeClass('active');
}
if ($($grid).length > 0) {
    $($btnGrid).addClass('active');
} else {
    $($btnGrid).removeClass('active');
}

$($btnTable).click(function() {
$(this).addClass('active');
$($btnGrid).removeClass('active');
$($grid).replaceWith(function() {
    var html = '';

    $('div:first', this).each(function() {
        html += '<tr class="table-head">';
        $('div', this).each(function() {
            html += '<th>' + $(this).html() + '</th>';
        });
        html += '</tr>';
    });

    $('div:not(:first)', this).each(function() {
        var innerHtml = '';
        var innerLink = '';
        $($link, this).each(function() {
            var href = $(this).attr('href');
            var id = $(this).attr('id');
            innerLink += '<a class="grid-link" href="'+ href +'" id="'+ id +'"></a>';    
        });

        $('div', this).each(function() {
            innerHtml += '<td>' + $(this).html() + '</td>';
        });
        if (innerHtml != '') {            
        html += '<tr>'+ innerLink + innerHtml +'</tr>';
        }
    });
    return $('<table class="toggle">' + html + '</table>').fadeIn(); 
});
});

$($btnGrid).click(function() {
$(this).addClass('active');
$($btnTable).removeClass('active'); 
$($table).replaceWith(function() {
    var html = '';
    $('tr', this).each(function() {
        html += '<div class="result three columns h-100">';
        $('th', this).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });
        $('td:first', this).each(function() {
            html += '<div class="grid-title">' + $(this).html() + '</div>';
        });    
        $('td:not(:first)', this).each(function() {
            html += '<div class="grid-row">' + $(this).html() + '</div>';
        });
        html += '</div>';

        $($link, this).each(function() {
            var href = $(this).attr('href');
            var id = $(this).attr('id');
            html += '<a class="grid-link" href="'+ href +'" id="'+ id +'"></a>';    
        });
    });

    return $('<div class="grid">' + html + '</div>').fadeIn();
});
});
4

1 に答える 1

0

あなたの質問を理解できたかどうかはわかりませんが、テーブルヘッドの最初の子としてリンクを挿入したい場合は、「プリペンド」機能を使用できます。

http://api.jquery.com/prepend/

$('.table-head').prepend('<a href="#">your link</a>');

そして結果：

<table class="toggle" style="display: table;">
    <tbody>
    <tr class="table-head">  <a href="#">your link</a>  <th>Title</th><th>Date</th><th>Info</th></tr><tr><td>Class Title</td><td>Item Details</td><td>Item Details</td></tr>
    </tbody>
</table>
于 2013-08-12T19:23:09.767 に答える