HTML : Div to Table

Question

HTML 형식의 표가 있습니다. 이제 DIV를 사용해야합니다. 테이블을 사용하지 마십시오. Plz이 방법을 말해줘. 이것은 웹, 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/

Answer 1

뭔가가있다? html 태그를 구축 할

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

그것은 좋은 방법이 아닙니다가 바로 연결하여 문자열 :

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

은 또한 아래의 코드 패턴을 사용할 수 있습니다. 테이블에 대한 마크 업 정적이 아니라 동적으로로드되는 경우

Answer 3

, 정말 당신이 당신이 CSS와 자바 스크립트를 포함 할 필요가있다 일 것이다 http://twitter.github.com/bootstrap/scaffolding.html

방법 @ 목재를 보라 추천 파일 (위의 링크 홈 페이지에서 zip 파일 다운로드)을 실행하면 아름답고 반응이 빠르고 유동적 인 시스템에 액세스 할 수 있습니다.

사이트에 아주 좋은 글이 있지만 빠른 실행을 제공합니다. 테이블로 사용하려면

, 당신은 먼저 클래스 '컨테이너 유체'그냥 사업부의 주요 용기가 필요합니다 :이 내

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

, 당신은 12 개 컬럼에 액세스 할 수있는 당신이 할 수있는 무제한 행을 자유롭게 조작 할 수 있습니다. 의는 제목 '표 -> 사업부'로 새 행을 추가 할 수 있습니다, 이것은 또한 간단한 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의 숫자는 3/12입니다.

<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를 사용하여 '테마'를 지정할 수 있습니다. 저는 답을주지 않기를 원하기 때문에 당신의 예를 사용하지 않았습니다. 당신이 배워야 할 것을 당신에게 제공하십시오.