0

テーブル内のデフォルトの特定の行を非表示にできる必要があります。

基本的に、これは e コマース サイト内の「マイ バスケット」ページであり、ここでのアイデアは、同じ製品の複数のインスタンスをすべて表示できるようにすることです。

例: 数量で 3 頭のヤギを選択したとします。表示されている製品の下に、[すべてのインスタンスを表示] というリンクがあります。これが意味することは、アンカーをクリックした場合に必要な合計 3 つのヤギの各インスタンスを表示することです。

これが私がやっていること/達成しようとしていることのイメージです:

ここに画像の説明を入力

したがって、私が抱えている問題は、「すべてのインスタンスを表示」行を構造的に HTML にまとめる方法です。親行の下に別のテーブルを作成しますか? 私はこれを考え、「インスタンス」を正しい製品にどのように配置するかという問題に至りました。

これまでの HTML コードは次のとおりです。このコードは、各製品行を達成するために行ったことを示しています。

<div class="item-section">
        <span class="section-heading">Smiles Gifts</span>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-bottom: 1px dotted #666666;padding: 0 0 5px 0;" >
            <tr>
                <th class="col-1">&nbsp;</th>
                <th class="col-2">Qty</th>
                <th class="col-3">Frequency</th>
                <th class="col-4">Card Type</th>
                <th class="col-5">Edit/Remove</th>
                <th class="col-6">Subtotal</th>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td class="item col-1 clearfix">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <img src="images/cart_dummy_image.jpg" alt="" />
                            </td>
                            <td>
                                <span class="product">World Food Programme</span>
                                <!-- LINK TO SHOW OTHER INSTANCES -->
                                <a class="show-instances" href="#">Show all instances</a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="col-2"">1</td>
                <td class="col-3">One Off</td>
                <td class="col-4">&nbsp;</td>
                <td class="col-5">
                    <a href="#" class="blue-anchor">Edit</a>
                    <a href="#">Remove</a>
                </td>
                <td class="col-6">$45.00</td>
            </tr>
</div>

提供された情報が十分に詳細であることを願っていますが、そうでない場合はご不明な点がございましたら、お気軽にお問い合わせください。できる限りお手伝いさせていただきます。

4

1 に答える 1

1

各エントリにHTML単純に行を追加するには、java-script でいくつかの調整を行って、それらの行を表示または非表示にする必要があります。jQueryはエレガントに処理できるので、私はjQueryを好みます。DOM

ここであなたのタスクを達成する簡単な方法（javascriptを投稿するだけ）

var link = $('<a class="show-instances" href="#">Show all instances</a>');
$('tr.main').hide().first().find('.product').parent().remove('a').append(link);
$('tr.main').first().show();

$('table').on('click', 'a.show-instances', function() {
    var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
    $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
    return false;
});​

動作中のデモを見てください

于 2012-08-22T05:36:18.103 に答える