Modificando el ejemplo de la base de datos PHP de AJAX

Me gustaría crear algo como este progtwig aquí:

http://www.w3schools.com/PHP/php_ajax_database.asp

Pero en lugar de la lista desplegable que se muestra en el ejemplo, ¿es posible cambiarla a formato de tabla como ejemplo, cuando hago clic en la Clase 1, se muestran los detalles para la clase 1 … los detalles están en mi base de datos, es de phpmyadmin :

Gracias de antemano … ayuda muy apreciada

¿Es esto correcto?

  
Road Based Proving Ground PG Off Road OR Towing TT
Class 1      
Class 2 CAT 2PG CAT 1OR CAT 2TT
Class 3 CAT 3PG CAT 2OR CAT 3TT
  CAT 4PG CAT 3OR  
Click on the Class or Category to view information on it

loadergetclassinfo.php:

 <?php $class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"]; $con = mysql_connect("localhost", "root", "cailing8195") or die ("Unable to connect to MySQL Server " . mysql_error()); if(is_resource($con)) $db = mysql_select_db("jlr", $con) or die( "Unable to select database " . mysql_error()); $query = "SELECT PTYPE, TYPE, PREREQ, DES FROM type WHERE TYID=" . $class_id; $res = mysql_query($query); $arr_data = mysql_fetch_assoc($res); mysql_close($con); foreach ($arr_data as $data) $html = "\n"; $html .= "\n"; $html .= "\n"; $html .= "
Type IDPermit TypeCategoriesPre-RequisisiteDescription
" . $class_id . "" . $data['PTYPE'] . "" . $data['TYPE'] . "" . $data['PREREQ'] . "" . $data['DES'] . "
\n"; echo $html; ?>

JQuery (en javascript.js):

  $(function() { $('a.class_link').click(function() { var class_id = $(this).attr('title'); $.post("loadergetclassinfo.php", {class: class_id}, function(result){ $('#detail_table').html(result); }); }); }); 

Y agrego esto dentro de mi archivo php de encabezado también:

    

Si desea que la fila en la que hace clic en el enlace, que se completará con los datos de la base de datos, haga algo como esto (no probado, pero aquí está la esencia):

HTML:

  Class 1        

jQuery:

 $(function() { $('a.classlink').click(function() { var class_id = $(this).attr('title'); $.post("loadergetclassinfo.php", {class_id: class_id}, function(result){ $('#class_' + class_id).html(result); }); }); }); 

loadergetclassinfo.php:

 < ?php $class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"]; $con = mysql_connect("localhost", "your_MySQL_username", "your_MySQL_password") or die ("Unable to connect to MySQL Server " . mysql_error()); if(is_resource($con)) $db = mysql_select_db("your_MySQL_database", $con) or die( "Unable to select database " . mysql_error()); $query = "SELECT data1, data2, data3 FROM your_data_table WHERE class=" . $class_id; $res = mysql_query($query); $arr_data = mysql_fetch_assoc($res); mysql_close($con); $html = "Class $class_id"; foreach ($arr_data as $data) $html .= "" . $data . "\n"; echo $html; ?> 

ACTUALIZAR:

Si desea que los datos de ‘Clase x’ aparezcan en otro lugar en su página HTML, puede hacer algo como esto:

Agregue esto a su HTML:

 

Cambia arriba jQuery así:

 $.post("loadergetclassinfo.php", {class: class_id}, function(result){ $('#class_data').html(result); }); 

Cambie el código php anterior a algo como esto (o puede usar una lista o lo que quiera ver aquí):

 $html = "\n"; $html .= "\n"; $html .= "\n"; $html .= "
Class NumberData 1Data 2Data 3
" . $class_id . "" . $data['data1'] . "" . $data['data2'] . "" . $data['data3'] . "
\n"; echo $html;

Esto supone que tiene columnas llamadas data1 etc. y que su índice principal se llama ‘clase’. Simplemente cámbialo por lo que es en tu caso.

ACTUALIZAR EN RESPUESTA A SUS EDICIONES:

Termine su código HTML con:

 

Edite esta statement jQuery:

 $.post("loadergetclassinfo.php", {class: class_id}, function(result){ $('#detailtable').html(result); }); 

Finalmente, elimine el código php de debajo de su tabla HTML y colóquelo en su propio archivo llamado “loadergetclassinfo.php” en el mismo directorio que el archivo HTML.

TAMBIÉN, esto está mal (lo siento, el error estaba en mi código):

 $class_id = empty($_POST["class_id"]) ? 1 : $_POST["class"]; 

Debiera ser:

 $class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"]; 

Cambie también el código de la tabla de detalles a:

 $html = "\n"; $html .= "\n"; $html .= "\n"; $html .= "
Type IDPermit TypeCategoriesPre- RequisisiteDescription
" . $class_id . "" . $data['PTYPE'] . "" . $data['TYPE'] . "" . $data['PREREQ'] . "" . $data['DES'] . "
\n";

puedes intentar usar la función ajax de jquery, podría ser algo como esto, podrías modificarlo.

  
Road Based Proving Ground PG Off Road OR Towing TT
Class 1