HTML：Table to Div

Question

我有一張HTML表格。 現在我需要使用DIV，不要使用表格。 Plz告訴我如何去做。 這是我第一次使用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"); 

我沒有足夠的點的圖像 所以，這是我的WebView .... http://imageshack.us/photo/my-images/713/webn.png/

Answer 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"); 

Answer 2

您還可以使用下面的代碼模式：

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標籤。

Answer 3

如果表中的標記是靜態的，而不是被動態加載，我真的建議你看看腳手架@http://twitter.github.com/bootstrap/scaffolding.html

的方式，它會工作時，您將需要包括CSS和JavaScript文件（在上面鏈接的主頁上下載一個zip文件），然後您將訪問一個漂亮，響應迅速，流暢的系統。

儘管網站上有一篇非常好的文章，但我會盡快給你解答。

要使用它作爲一個表，你首先需要主容器，它只是一個與類的容器流體'DIV：

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

在此，您有機會獲得12列，你可以操縱自由和無限的行。讓我們添加一個新的一行標題：「表 - > DIV」，這也是一個簡單的div，但與類「排液」：

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

現在讓我們做一個3×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來「主題」。我沒有使用你的例子，因爲我不想給出答案，只是向你提供你需要學習的東西。