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

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

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 回答
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 的幻方，每一列在行中定义为一个 div，类为 'span[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 回答