HTML：表格到Div

我有一个HTML表格。 现在我需要使用DIV，不要使用table。 请告诉我怎么做。 这是我第一次使用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");

var表_数据=”“；
表_数据+=“”；
表_data+=“TicketID”；
表_数据+=“名称”；
表_数据+=“生日”；
表_数据+=“删除”；
表_数据+=“”；
$.each（data.list，function（i，list）
{
表_数据+=“”；
表_data+=“”+list.account.ticketid+“”；
表_data+=“”+列表.帐户.名称+“”；
表_data+=“”+列表.帐户.生日+“”；
表_数据+=“”；
表_数据+=“”；
});
表_数据+=“”；
$（表#数据）。附加到（“#内容”）；

我没有足够的观点来提升形象 这是我的网络视图

像这样的事

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

var表_数据=”；
表_数据+=''；
表_数据+='TicketID'；
表_data+='Name'；
表_数据+=‘生日’；
表_数据+=‘删除’；
表_data+='
'；
$.each（data.list，function（i，list）
{
表_数据+=''；
表_data+=''+list.account.ticketid+''；
table_data+=''+list.account.name+''；
表_data+=''+列表.帐户.生日+''；
表_数据+=''；
表_data+='
'；
});
表_数据+=''；
$（表#数据）。附加到（“#内容”）；

您也可以使用以下代码模式：

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

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

table_data.append(table_row);

---

仅仅连接字符串来构建html标记不是一个好的做法。

如果表的标记是静态的，而不是动态加载的，我真的建议您看看Scaffolding@

它的工作方式是您需要包含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的幻方，行中的每一列都定义为一个div，类为“span[number]”，其中number是大小（如我所说，max是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>

测试部
4.
9
2.
2.
5.
7.
8.
1.
6.

---

瞧，这是一个浮动的魔方。从这里，你可以使用基本的CSS来“主题化”它。我没有使用您的示例，因为我不想给出答案，只是提供您需要学习的内容。

这不是一个表-这是生成表的JS代码。请显示结果HTML输出为什么要更改为DIV？你试过什么？所以这不是一个让人们为你工作的网站。我想用另一个环境来浏览这个网站。但是我对网页、html、js的了解还不够。。。这是我第一次使用网络等等…@Zoltan TOth:我在这里展示我的网络。。但它把这个网站看成是一个。。。。列@我想我需要显示我所有的索引。jspWhy为什么一定要使用div而不是table？没问题，很高兴我能帮上忙。如果你在网络开发方面需要任何帮助，你可以随时给我发邮件。除息的

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