3

を取得して<ul><li>、CSS でスタイルを設定する素敵なテーブルにするのが好きです。

jQueryで変換するのが好き

* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$

延々と....

の最初の行で表の見出しを作成し、他の行で<ul>表のセルを作成します...

ページにはおそらく 4 ～ 5<ul>秒が表示されます。

ケーキにアイシングを追加するには、稼ぎの多いものから少ないものへと並べ替えましょう!

私はこの質問を見つけました：

HTMLテーブルをJQueryでリストに変換するには?

それは正反対です...しかし、おそらく良いスタートですか？わかりません、調べてみます...しかし、まだ質問は広く未解決のままです。

私はこの質問を見つけました：

HTMLテーブルをJQueryでリストに変換するには?

それは正反対です...しかし、おそらく良いスタートですか？わかりません、調べてみます...しかし、まだ質問は広く未解決のままです。

ソリューションに関連する別の質問...

を「削除」してテーブルに置き換えたい場合..

空のテーブルを作るのは好きではありません..

ここにコードがあります...おそらく「最適化」されていませんが、動作します

$('#texte').append('<div id="where_my_table_goes"></div>');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();

何か良いですか？

いいえいいえいいえ、質問/回答になり、プラグインが素晴らしいので...しかし、もう機能しません...

ここにバグがあります...クリックイベントがトグルのときにプラグイン（tablerize）を呼び出し、UL全体をテーブルで置き換えるのが好きです...それはしません

コードの小さなスニペットは次のとおりです。

<script type="text/javascript">
    $(document).ready(function() {

        $('#texte > h1').next().hide(500);  
        $('#texte > h1').click(function() {
        $(this > ul).tablerize();
        $(this).toggle(500);
        });
    });
</script>

驚くべきことではありませんが、うまくいきません..私は確かに何かを台無しにします...そして私は運が悪いのでプラグインを微調整します!...

私はそのコードを保持するのが本当に好きです:

$("texte").append('<div id="where_my_table_goes"></div>');
$(#where_my_table_goes"></div>').append(table);
$('#my_oddly_formatted_list').remove();

それは次のようになります。

remove the ul
append the div to (this)
put the table into that div

div も必要ですか？

ヘルプ！

うまくいきません。これが完全なページです。おそらく、それが何をすべきかを確認するのに大いに役立ちます

http://www.acecrodeo.com/new/04-classement.php

データがそこにあることを確認するためだけに、遅延を使用して非表示にします...

タイトルを押した後..テーブル化が発生し、古いulを削除してテーブルに置き換え、スライドトグルします

わかりました..現在の状態があります...

回答を編集して投稿することしかわかりません...更新ボタンはどこにもありません..

高く評価したり、評価に役立つ何かを提供したいのですが...方法がわかりません

問題について...私はあなたが私に与えたものを正確に投稿しました..そしてそれは機能しません...リンクを見てみましょう：http://www.acecrodeo.com/new/04-classement.php

ここにバグがあります：ヘッダーを切り替えます...

私はとても迷っています！

4

1 に答える 1

10

次のようなHTMLを使用している場合は、次のようにします。

<ul id='my_oddly_formatted_list1' class='odd_list'>
    <li>Column A|Column B|Column C</li>
    <li>Value A1|Value B1|Value C1</li>
    <li>Value A2|Value B1|Value C2</li>
    <li>Value A3|Value B1|Value C3</li>
    <li>Value A4|Value B1|Value C4</li>
</ul>
<ul id='my_oddly_formatted_list2' class='odd_list'>
    <li>Column D|Column E|Column F</li>
    <li>Value D1|Value E1|Value F1</li>
    <li>Value D2|Value E1|Value F2</li>
    <li>Value D3|Value E1|Value F3</li>
    <li>Value D4|Value E1|Value F4</li>
</ul>
<ul id='my_oddly_formatted_list3' class='odd_list'>
    <li>Column G|Column H|Column I</li>
    <li>Value G1|Value H1|Value I1</li>
    <li>Value G2|Value H1|Value I2</li>
    <li>Value G3|Value H1|Value I3</li>
    <li>Value G4|Value H1|Value I4</li>
</ul>

次に、jQueryを使用して、次のようなプラグインを作成できます。

jQuery.fn.tablerize = function() {
        return this.each(function() {
                var table = $('<table>');
                var tbody = $('<tbody>');
                $(this).find('li').each(function(i) {
                        var values = $(this).html().split('*');
                        if(i == 0) {
                                var thead = $('<thead>');
                                var tr = $('<tr>');
                                $.each(values, function(y) {
                                        tr.append($('<th>').html(values[y]));
                                });
                                table.append(thead.append(tr));
                        } else {
                           var tr = $('<tr>');
                           $.each(values, function(y) {
                                   tr.append($('<td>').html(values[y]));
                           });
                           tbody.append(tr);
                        }
                });
                $(this).after(table.append(tbody)).remove();
        });
};

次に、次のいずれかの方法で呼び出すことができます。

// tablerize all UL elements in the page
$('ul').tablerize();

// only UL elements with class 'odd_list'
$('ul.odd_list').tablerize();

// individually tablerize all the lists
$('#my_oddly_formatted_list1').tablerize();
$('#my_oddly_formatted_list2').tablerize();
$('#my_oddly_formatted_list3').tablerize();

並べ替えなどに関しては、この機能をテーブルに提供するために利用できるプラグインがたくさんあります。

** 編集 **

コードの問題は次の行にあります。

$(document).ready(function() {
    /*$('#texte > h1').next().hide(1000); */ 
    $('#texte > h1').click(function() {
        $(this).tablerize();
        /*$(this).next().toggle(500);*/
    });
});

tablerize私が書いたプラグインは、<ul>要素がテーブル化することを期待しています。あなたがそれを渡すとき、あなたはそれに一致しthisたものを渡しているのであって、ではありません。この行を置き換える場合：h1<ul>

$(this).tablerize();

この行では、ヘッダーの直後にUL要素が見つかります。

$(this).next('ul').tablerize();

意図したとおりに機能するはずです。

また：

  • 質問を更新するには、[編集]をクリックして、必要なものを追加します。
  • 回答を受け入れるには、このテキストの左側にあるチェックをクリックします。
于 2009-02-24T15:16:22.363 に答える