1

Web サイトのページの 1 つで、テーブル要素にデータを表示しますが、データをリスト (テーブル) またはグリッド (ul>li>img) として表示するかどうかをユーザーが選択できるようにするボタンを追加したいと考えています。それを行う最善の方法は何ですか？

                <table>
                    <tr>
                        <td>datas 1</td>
                        <td><img src="image1.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 2</td>
                        <td><img src="image2.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 3</td>
                        <td><img src="image3.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 4</td>
                        <td><img src="image4.jpg"></td>
                    </tr>
                </table>

トグルボタンで切り替えると：

                 <ul>
                    <li><img src="image1.jpg"></li>
                    <li><img src="image2.jpg"></li>
                    <li><img src="image3.jpg"></li>
                    <li><img src="image4.jpg"></li>
                </ul>

jQueryまたはCSSでそれを作成する必要がありますか?

私が試したのは、ページの読み込みが終了したときに div 要素を作成し、テーブル要素で img 属性を取得してリストを作成することです。次に、テーブルと新しい div (diplay:none を使用) を作成します。ユーザーがボタンをクリックすると、テーブルに何も表示せず、divにブロックを表示しました。これは正しい方法ですか？

コンテンツが重複しているため、あまり「クール」ではないと思います。

<table>...</table>
<div style="display:none">...</div>

あれについてどう思う？

4

3 に答える 3

0

この状況で私がすることは、同じマークアップとスタイルを、前述の「ビュー」(リスト/グリッド) に応じて異なる方法で利用することです。ユーザーの選択に応じて、それぞれのスタイルを設定できます。

(ここでの解決策は、ユーザーが前述のボタンを操作したときに、ページ内の body タグに「リスト/グリッド」のクラス名を追加するのと同じくらい簡単です!)

画像が既に入力されているため、そのデータを非表示にすることはありませんが、既に入力されているため、その画像を最小化してサムネイルに変換します。(画像をレンダリングするブラウザでは使用せず、style='display:none;' を追加するだけです)

アップデート：

craigslist を参照して、この状況をどのように処理しているかを確認してください。実際に、「display:none」で画像のスタイルを設定します。したがって、クライアント/プロジェクトなどに応じて、スタイル内の display:none はあなた次第です!

お役に立てれば！

于 2013-06-14T12:23:43.610 に答える
0

私は最近、同じことをする必要がありました。あなたと同じように、周囲の html を交換しながらコンテンツを保持したかったのです。CSS は、ほとんどの場合、テーブル/グリッドをスタイリングするためのものです。ここでのショーの本当の主役は jQuery です。

見てみましょう: http://jsfiddle.net/rymill2/R3J5m/

HTML

<div class="row"> 
    <a class="button-table" data-target="table"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Table"></a>
    <a class="button-grid" data-target="grid"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Grid"></a>
</div>
<div class="content">
    <table>
        <tr class="table-head">
            <th>Title</th>
            <th>Date</th>
            <th>Info</th>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
    </table>
</div>

CSS

.table-head, div, a, p, span {
    box-sizing:border-box !important;
}
.columns, .column {
    float:left;
    position:relative;
}
.h-100 {
    min-height:110px;
}
.three {
    width:25%;
}
a:hover {
    cursor:pointer;
    background:#e9e9e9;
}
a.toggle-table, a.toggle-grid {
    position:relative;
    float:left;
    margin-right:6px;
    font-size:20px;
    padding:8px;
}
.settings, .link {
    display:none;
}
.grid {
    overflow:auto;
}
.grid .result {
    padding:2%;
    background:#e9e9e9;
    border:1px solid #333;
}
.grid .result:first-child {
    display:none;
}
.grid .result .title, .grid.result .row, .grid .result .link {
    position:relative;
    float:left;
    width:100%;
}
.grid .result .title {
    border-bottom:1px solid yellow;
    padding-bottom:2px;
    margin-bottom:2px;
    color:#282828;
    font-size:16px;
    font-weight:bold;
}
.grid .result .row {
    color:#666;
    font-size:10px;
}
.table-head {
    background:#333;
    color:#fff;
    text-align:left;
    font-size:12px;
}

JS

$('.button-table').click(function() {
$('.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 = '';
        $('div', this).each(function() {
            innerHtml += '<td>' + $(this).html() + '</td>';
        });
        if (innerHtml != '') {
        html += '<tr>' + innerHtml + '</tr>';
        }
    });
    return '<table>' + html + '</table>'; 
});
});

$('.button-grid').click(function() {
$('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', this).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });
        html += '</div>';
    });
    return '<div class="grid">' + html + '</div>';
});
});
于 2013-08-08T13:22:51.730 に答える