Question

目前，在对mysql进行查询后，所有数据都显示在HTML表格中：

会员编号|名字|姓氏|地址|年龄|国籍| id |卡|职业..

问题是所有内容都被挤压，并且在HTML表格中显示不好。

我希望可能只显示会员编号，姓名和姓氏，一旦您点击会员编号，所有数据都会显示得很整齐。

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

由于

Answer 1

如果我理解正确，您需要一个HTML表格，其中显示每个成员的成员资格编号，姓名和姓氏。单击成员资格编号时，您希望它显示其余详细信息。我认为Surreal Dreams使用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 2

一种选择是使用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 3

我非常喜欢这样一个任务的定义列表，但你可以将它与一个表结合起来以达到同样的效果。这是一个演示：

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

Answer 4

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

然而，“整洁地”呈现是非常主观的 - 你必须决定你想要展示什么以及如何展示它，这将是所有CSS和HTML。我会马上告诉你，避免使用表格 - 去寻找干净的语义HTML。

显示表中的所有数据

4 个答案: