테이블의 모든 데이터 표시

Question

현재 mysql에 대한 쿼리를 수행 한 후 모든 데이터가 HTML 테이블에 표시됩니다. 예 :

membership-number | 이름 | 성 | 주소 | 나이 | 국적 | 이드 | 카드 | 직업 ..

문제는 모든 콘텐츠가 압축되어 HTML 테이블에 멋지게 표시되지 않는다는 것입니다.

회원 번호, 이름, 성을 표시하고 회원 번호를 클릭하면 모든 데이터가 깔끔하게 표시됩니다.

자바 스크립트이거나 아니지만 적어도 모든 데이터를 깔끔하게 보여줄 수있는 방법에 대한 단서를 제공 할 수 있다면 잘 모르겠다.

감사

Answer 1

짧은 대답은 당신이 출력 데이터를 원하는 다음 사용자 상호 작용에 따라 표시되는 정보를 변경하는 경우, 당신은 자바 스크립트를 필요로한다는 것입니다. 특히, 나는 이런 종류의 일을 위해 jQuery를 제안한다. HTML과 CSS로 데이터를 표시 한 다음 JavaScript/jQuery에서 멋진 프리젠 테이션을 보여줄 수있는 좋은 방법을 찾아야합니다.

그러나 "깔끔하게"프리젠 테이션하는 것은 주관적입니다. 표시 할 내용과 레이아웃 방법을 결정해야하며 모든 CSS와 HTML이됩니다. 나는 박쥐를 바로 잡을 것이고 테이블을 피할 것입니다. 좋은 깨끗한 시맨틱 HTML을 찾으십시오.

Answer 2

정확하게 이해하면 각 구성원의 회원 번호, 이름 및 성을 표시하는 HTML 표가 필요합니다. 회원 번호를 클릭하면 나머지 세부 정보가 표시됩니다. 저는 초현실적 인 꿈이 바로 그 부분을하기 위해 자바 스크립트를 사용하는 것에 관한 것이라고 생각합니다.

그것은 (의사 실례 - 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>"; 

그런 다음 같은 것을 한 파일의 상단에 자바 스크립트 방법을 필요로했던 것과 이 사람은 여기에 있습니다 : http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

로라

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

);

그럼 당신은 어쩌면이처럼 입력 매개 변수를 지정할 수 있습니다

$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

저는 그러한 작업을위한 정의 목록을 아주 좋아합니다.하지만 그와 결합 할 수 있습니다. 같은 효과를내는 표. 여기 데모 : 당신이 필요

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