显示表格中的所有数据

Question

当前对mysql执行查询后，所有数据都显示在HTML表格中，例如：

membership-number |名称|姓氏地址|年龄|国籍| id |卡|专业..

问题是，所有的内容都被挤压了，并没有在HTML表格中显示出来。

我想可能只是会员号码，姓名和姓氏显示，一旦你点击会员号码，所有的数据然后整齐地显示出来。

不知道我需要使用什么，如果它是JavaScript或不，但会apprciate如果你至少可以给我一个线索，如何能够以一种整洁的方式显示所有的数据。

感谢

Answer 1

简短的回答是，如果你想输出的数据，然后更改基于用户交互显示的信息，你需要的JavaScript。具体来说，我建议jQuery这种事情。您仍然需要制定出一种很好的方式来使用HTML和CSS显示您的数据，然后让JavaScript/jQuery显示出漂亮的演示文稿。

但是，呈现“整齐”是非常主观的 - 您必须决定要展示的内容以及如何布置，并且这将全部是CSS和HTML。我会立即告诉你，避免表格 - 去干净的语义HTML。

Answer 2

如果我的理解正确，您需要一个HTML表格，显示每个成员的会员编号，姓名和姓氏。当你点击会员号码时，你希望它显示其余的细节。我认为超现实主义的梦想是正确的使用Javascript来做那一部分。

它可能看起来像这样（请原谅伪 - 不记得的foreach语法）：

echo "<table id='data'>"; 
foreach ($row in $sqltable) 
{ 
    echo "<tr>"; 
    echo "<td><a onclick='displaymoreinfo'>".$row['id']."</a></td>"; 
    echo "<td>".$row['name']."</td>"; 
    echo "<td>".$row['surname']."</td>"; 
    echo "</tr>";  
} 
echo "</table>"; 

然后，你需要一个JavaScript方法在那个不喜欢的东西的文件的顶部是什么此人在这里： http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

-Laura

Answer 3

一种选择是使用jQuery和datatables。

与普通的HTML一起使用，您的表格会立即转换为可排序，分页，样式等表格。你当然可以选择你想要应用的设置。

您也可以编写自己的PHP表类或脚本，它们与CSS一起根据您的输入呈现数据。然后，您可以使用PHP数组，这样的事情也许指定这些参数：

PHP：

比方说，您的SQL查询脚本，最终返回该表数据是这样的：

$tbl_data = array(
    0 => array("nr" => "10", "name" => "John", "surname" => "Smith", "address" => " Plaza Hotel Room 12", "age" => "44", "nat" => "Syldavian", "id" => "12345", "card" => "MasterCard", "prof" => "Pet Washer"), 
    1 => array("nr" => "11", "name" => "Captain", "surname" => "Haddock", "address" => "Marlinspike Hall", "age" => "55", "nat" => "British", "id" => "133455", "card" => "Discovery", "prof" => "Captain") 

）;

那么你也许可以指定你的输入参数如下：然后一直使用

$arr_cols = array("nr" => "Membership Number", "name" => "Name", "surname" => "Surname", "address" => "Address", "age" => "Age", "nat" => "Nationality", "id" => "ID", "card" => "Card", "prof" => "Profession"); 

$arr_align = array("nr" => "center", "name" => "left", "surname" => "left", "address" => "left", "age" => "center", "nat" => "center", "id" => "center", "card" => "left", "prof" => "left"); 

$lst_show = array("nr", "name", "surname"); 

此表视图方法，独立于特定输入：

$html = "<table class='grid'>\n"; 
// headings 
foreach ($arr_cols as $key => $title) { 
    if (in_array($key, $lst_show)) 
     $html .= "<tr><th>$title</th></tr>\n"; 
} 
//rows 
foreach ($tbl_data as $arr_row) { 
    foreach ($arr_row as $key => $data) { 
    if (in_array($key, $lst_show)) { 
     $align = !empty($arr_align[$key]) ? " align='" . $arr_align[$key] . "'" : ''; 
     $html .= "<tr><td$align>$data</td></tr>\n"; 
    } 
    } 
} 
$html .= "</table>\n"; 

echo $html; 

CSS：

table.grid {border:1px solid blue; etc.} 
table.grid th {etc.} 
table.grid td {etc.} 

Answer 4

我是这样一个任务定义列表的忠实粉丝，但你可以结合这个w ith同样的效果表。这里有一个演示：

http://jsfiddle.net/crazytonyi/rZfKg/