テーブルのすべてのデータを表示

Question

現在、mysqlへのクエリを実行した後、すべてのデータはHTMLテーブルに表示されます。例：

membership-number |名前|姓アドレス|年齢|国籍| id |カード|職業..

問題は、すべてのコンテンツが圧縮され、HTMLテーブルにniceが表示されないということです。

メンバーシップ番号、名前、姓を表示したい場合は、メンバーシップ番号をクリックするとすべてのデータがきれいに表示されます。

JavaScriptかどうかはわかりませんが、少なくとも私がすべてのデータをきちんと表示できるようにする方法の手がかりを与えることができるかどうかは分かりません。

おかげ

Answer 1

短い答えは、あなたが出力するデータを必要とし、ユーザーとの対話に基づいて表示された情報を変更した場合、あなたはJavaScriptを必要とするということです。具体的には、私はこの種のことについてjQueryを提案します。 HTMLやCSSでデータを表示し、JavaScript/jQueryで素敵なプレゼンテーションを見せてもらうためには、まだ素敵な方法が必要です。

しかし、「きれいに」提示することはかなり主観的です。表示する内容とレイアウトする方法を決定する必要があります。すべてCSSとHTMLになります。私はバットからすぐにあなたに伝え、テーブルは避けてください。きれいなセマンティックなHTMLが必要です。

Answer 2

私が正しく理解している場合は、各メンバーのメンバーシップ番号、名前、姓を表示するHTMLテーブルが必要です。メンバーシップ番号をクリックすると、残りの詳細が表示されます。私はSurreal Dreamsが、その部分を行うためにJavascriptを使用することについて正しいと思います。

それは、この（擬似コードを言い訳してください - foreachの構文を思い出すことができない）のようなものになります：次に、あなたが何のような何かをしたファイルの先頭にjavascriptの方法が必要と思い

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>"; 

をこの人はここにあります http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

-Laura

Answer 3

一つの選択肢は、jQueryとdatatablesを使用することです。

通常のHTMLと一緒に使用すると、テーブルはすぐにソート可能、ページ設定済み、スタイル付きなどの表に変換されます。もちろん、適用する設定を選択することもできます。

また、入力に応じてCSSでデータをレンダリングする独自のPHPテーブルクラスまたはスクリプトを作成することもできます。あなたは多分、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") 

を）。

その後、あなたは多分このようなあなたの入力パラメータを指定することができます

$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：

$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"); 

このテーブルビュー方式は、常に特定の入力から独立して、使用することができます

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

Answer 4

私はそのようなタスクの定義リストのファンですが、あなたはそれを組み合わせることができます同じエフェクトのテーブル。ここではデモです：あなたがする必要が

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