Question

我有一个div，我想创建一个带有动态列的HTML表。

表的性质应该是一列应该总是固定的;那么如果我想要显示7个日期，它应该显示7个动态列;如果我选择15天显示它应显示15个动态列;并且列的名称应该按日期。

生成的动态列应为空，并且无法从任何位置获取数据。

这是我的HTML中的div ...

<div id="main" style="float: left; width:83%; margin-left:5px; margin-top:0px;">
<div id="doclist">
        </div>
<div id="wrapper">
    <ul id="tabs">
        <!-- Tabs go here -->
    </ul>
    <div id="content">
        <!-- Tab content goes here -->
    </div>
</div>
</div>

这是我的HTML表格......

<table>
<thead>
    <tr>
        <th>Header Column</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
    </tr>
</thead>
<tbody>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
</tbody>
</table>

我该如何创建呢？

Answer 1

<?php
$db = mysqli_connect("host", "username", "password", "database");
$query = mysqli_query($db, "SELECT * FROM table ORDER BY id ASC LIMIT 10");
echo "<table cellspacing='0'><tr><th>ID</th><th>Name</th><th>Lastname</th></tr>";
while($row = mysqli_fetch_array($query))
{
    echo "<tr><td>" . $row['id'] . "</td><td>" . $row['FirstName'] . "</td><td>" . $row['LastName'] . "</td></tr>";
}
?>
</table>

如果您使用MySQL数据库存储信息，这应该可行吗？让我知道如果有错误，没有尝试过代码，只需写下来。如果您对此有任何疑问，请联系。

要对日期等进行排序，只需更改ORDER BY部分以及您希望显示的天数。你显然需要一个列的日子并稍微编辑我的代码。

EDIT;您将其更改为AJAX / jQuery，认为您只想从数据库中获取信息并将其放入表中。

Answer 2

首先，您想拥有一些数据。表实际上是一个对象数组。每行代表一个对象。

var row1 = { col1: 'hello', col2: 'world' };
var row2 = { col1: 'hi', col2: 'globe' };

你的问题是，当你在这样一个对象中处理不同数量的属性时，你正在寻找一种循环对象属性的方法。这可以通过for ... in -statement来完成。

for (var col in row) {
    // code to add a cell
}

要生成表格，您需要将对象放在数组中。

var rows = [ row1, row2 ];

您需要拥有表格标签：

$('#content). append('<table>');

要构建标题行，您需要获取数组的第一项并循环显示它的属性。

$('#content table').append('tr');
var first = rows[0];
for (var col in first) {
    $('#content table tr').append('<td>' + col + '</td>');
}

然后，您可以继续使用for循环构建行。

$('#content table').append('tr');
for(var i = 0; i < rows.length; i++) {
    for (var col in first) {
        $('#content table tr').last().append('<td>' + rows[i][col] + '</td>');
    }
}

之后您可以自由修改您的阵列，您的桌子将根据数据自行调整。

Answer 3

$(document).ready(function(){
    $("table").hide();
    $("#hide").hide();   
    $("#submit").click(function(){
        $("table").show();
        $("#submit").hide();
$("#hide").show();        



    });
       $("#hide").click(function(){
        $("table").hide();
        $("#submit").show();
$("#hide").hide();        



    });
});

使用上面的JQuery代码来显示或隐藏你的表格。

示例： http://jsfiddle.net/hsakapandit/jhb86/

如何在div中创建包含动态列的HTML表

3 个答案: