顯示錶格中的所有數據

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/