使用php或jquery填充html表(或类似的结构)

Question

我正在尝试用来自mySQL的大约5个数据字段来填充一个表结构。我对web开发完全陌生，所以我发现这是相当困难的。

这是我当前用来填充html元素的javascript行：

$.get("reports.php",
    {"param":"getusers"},
    function(returned_data)
    {
    alert(returned_data);
    document.getElementById("allusers").innerHTML = returned_data;  // Clear the select
    });

这是它访问的php：

case "getusers":
    $result = mysql_query(
    "SELECT * FROM  users") 
    or die(mysql_error());

    while($row = mysql_fetch_assoc($result))
    {
        $str .= "<option>". $row['username'] .</option>";   //accumulate table
    }

    echo $str;
break;

这完美地检索了数据，但我需要将其放入一个只有几列和几行的结构中。我想不出该怎么做。我尝试了许多解决方案，其中一些涉及css，但我不能理解。

我喜欢this example，但当我使用它时，它只显示源代码。我也不知道如何调用我的reports.php，这让它有点凌乱。

我该如何将这些数据发送到我的html文件，并将其结构化，以便以有组织的格式显示？

我将非常感谢任何人的帮助，

谢谢。

Answer 1

您已经掌握了基本的结构。只需让PHP代码生成表html，而不是选项：

$str .= '<tr><td>' . $row['field1'] . </td><td>' . $row['field2'] etc....

然后在Javascript中将该html插入到表中：

document.getElementById('id_of_table').innerHTML = returned_data;

就ajax/php而言，您只是来回发送一些纯文本。由您的代码决定如何处理该纯文本。

Answer 2

下面的代码将用jquery填充html表。

<table id="tablefriendsname">
 <tbody>
 </tbody>
</table>

$.ajax({    
type: "POST",
url: "/users/index/friendsnamefromids",
data: "IDS="+requests,
dataType: "json", 
success: function(response){
var name = response;
        //Important code starts here to populate table  
var yourTableHTML = "";
    jQuery.each(name, function(i,data) {
        $("#tablefriendsname").append("<tr><td>" + data + "</td></tr>");
    });
}

});