0

私はHTMLでテーブルを持っています。今は DIV を使用する必要があります。テーブルは使用しないでください。やり方を教えてください。これは、web、js、html などを扱う最初の作業です。実際には十分な知識がありません。基礎知識を学ぶためのリンクを教えていただければ幸いです。

var table_data="<TABLE border='1' WIDTH='100%'>";
    table_data +="<TR>";
        table_data +="<TD>TicketID</TD>";
        table_data +="<TD>Name</TD>";
        table_data +="<TD>Birthday</TD>";
        table_data +="<TD>Delete</TD>";
    table_data +="</TR>";
    $.each(data.list, function(i,list)
    {
        table_data +="<TR>";
        table_data +="<TD>"+list.account.ticketid+"</TD>";
        table_data +="<TD>"+list.account.name+"</TD>";
        table_data +="<TD>"+list.account.birthday+"</TD>";
        table_data +="<TD><input type='button' value='Delete' id='"+list.account.ticketid+"'/></TD>";
        table_data +="</TR>";
    });

    table_data +="</TABLE>";
    $(table_data).appendTo("#content");

画像をアップするのに十分なポイントがないので、これが私のウェブビューです....

http://imageshack.us/photo/my-images/713/webn.png/

4

3 に答える 3

1

このようなもの？

var table_data='<div id="table">';
    table_data +='<div class="row">';
        table_data +='<div class="cell">TicketID</div>';
        table_data +='<div class="cell">Name</div>';
        table_data +='<div class="cell">Birthday</div>';
        table_data +='<div class="cell">Delete</div>';
    table_data +='</div> <br>';
    $.each(data.list, function(i,list)
    {
        table_data +='<div class="row">';
        table_data +='<div class="cell">'+list.account.ticketid+'</div>';
        table_data +='<div class="cell">'+list.account.name+'</div>';
        table_data +='<div class="cell">'+list.account.birthday+'</div>';
        table_data +='<div class="cell"><input type="button" value="Delete" id="'+list.account.ticketid+'"/></div>';
        table_data +='</div> <br>';
    });

    table_data +='</div>';
    $(table_data).appendTo("#content");
于 2012-11-22T01:47:21.007 に答える
0

テーブルのマークアップが静的で、動的に読み込まれない場合は、Scaffolding @ http://twitter.github.com/bootstrap/scaffolding.htmlを確認することを強くお勧めします。

それが機能する方法は、css と javascript ファイル (上記のリンクのホームページで zip をダウンロード) を含める必要があり、その後、美しく応答性の高い流動的なシステムにアクセスすることです。

サイトには非常に優れた記事がありますが、簡単に説明します。

これをテーブルとして使用するには、最初にメイン コンテナが必要です。これは、「container-fluid」クラスを持つ単なる div です。

<div class="container-fluid">
    <!-- Main Container -->
</div>

この中で、自由に操作できる 12 列と無制限の行にアクセスできます。'Table -> Div' という見出しの新しい行を追加しましょう。これも単純な div ですが、クラスは 'row-fluid' です。

<div class="container-fluid">
    <!-- Main Container -->
    <div class="row-fluid">
        <!-- First row -->
        Test -&gt; Div
    </div>
</div>

次に、3 x 3 の魔方陣を作成しましょう。各列は、クラス 'span[number]' の div として行で定義されます。number はサイズです (前述のように、最大​​は 12 です)。したがって、3 つの列がある場合、数は 3/12、つまり 3 になります。

<div class="container-fluid">
    <!-- Main Container -->
    <div class="row-fluid">
        <!-- First row -->
        Test -&gt; Div
    </div>
    <div class="row-fluid">
        <div class="span4">
            4
        </div>
        <div class="span4">
            9
        </div>
        <div class="span4">
            2
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            2
        </div>
        <div class="span4">
            5
        </div>
        <div class="span4">
            7
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            8
        </div>
        <div class="span4">
            1
        </div>
        <div class="span4">
            6
        </div>
    </div>
</div>

そして出来上がり、それはフローティング魔方陣です。ここから、基本的な CSS を使用して「テーマ」を設定できます。答えを教えたくないので、あなたの例を使用しませんでした。学ぶために必要なものを提供するだけです。

于 2012-11-22T01:55:00.963 に答える
0

以下のコード パターンを使用することもできます。

var table_data = $("<div/>");
table_data.attr("id", "table");

var table_row = $("<div/>");
table_row.addClass("row");

table_data.append(table_row);

テキストを追加するとき、

table_row.append(list.account.name);

文字列を連結して html タグを作成するのは良い方法ではありません。

于 2012-11-22T01:53:40.567 に答える