Изменение примера базы данных AJAX PHP

Если вы хотите, чтобы строка, в которой вы нажимаете ссылку, которая заполняется данными из базы данных, сделайте что-то вроде этого (непроверено, но вот суть):

HTML:

 <tr id='class_1'> <td><a href='#' class='classlink' title='1'>Class 1</a></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> 

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 = "<td><a href='#' class='classlink' title='$class_id'>Class $class_id</a></td>"; foreach ($arr_data as $data) $html .= "<td>" . $data . "</td>\n"; echo $html; ?> 

ОБНОВИТЬ:

Если вы хотите, чтобы данные «Class x» отображались где-то еще на вашей HTML-странице, вы можете сделать что-то вроде этого:

Добавьте это в свой HTML:

 <div id='class_data'></div> 

Измените выше jQuery следующим образом:

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

Измените выше php-код на что-то вроде этого (или вы можете использовать список или что-то, что вам нравится здесь):

 $html = "<table>\n"; $html .= "<tr><th>Class Number</th><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>\n"; $html .= "<tr><td>" . $class_id . "</td><td>" . $data['data1'] . "</td><td>" . $data['data2'] . "</td><td>" . $data['data3'] . "</td></tr>\n"; $html .= "</table>\n"; echo $html; 

Это предполагает, что у вас есть столбцы с именем data1 т. Д., И ваш основной индекс называется «классом». Просто измените его на то, что в вашем случае.

ОБНОВЛЕНИЕ В ОТВЕТ НА ВАШИ ИЗМЕНЕНИЯ:

Завершите свой код HTML:

 <div id='detailtable'></div> 

Измените этот оператор jQuery:

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

Наконец, удалите php-код снизу вашей таблицы HTML и поместите его в собственный файл под названием loadergetclassinfo.php в том же каталоге, что и файл HTML.

ТАКЖЕ, это неправильно (извините, ошибка была в моем коде):

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

Должно быть:

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

Также измените код таблицы данных:

 $html = "<table>\n"; $html .= "<tr><th>Type ID</th><th>Permit Type</th><th>Categories</th><th>Pre- Requisisite</th><th>Description</th></tr>\n"; $html .= "<tr><td>" . $class_id . "</td><td>" . $data['PTYPE'] . "</td><td>" . $data['TYPE'] . "</td><td>" . $data['PREREQ'] . "</td><td>" . $data['DES'] . "</td></tr>\n"; $html .= "</table>\n"; 

вы можете попытаться использовать функцию ajax из jquery, это может быть что-то вроде этого снова, вы можете изменить его.

  <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>Road Based</td> <td>Proving Ground PG</td> <td>Off Road OR</td> <td>Towing TT</td> </tr> <tr> <td onclick="getPage(this)" >Class 1</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <div id='content'></div> <script type="text/javascript"> function getPage(class) { //generate the parameter for the php script var data = 'page=' + document.location.hash.replace(/^.*#/, ''); $.ajax({ url: "loadergetclassinfo.php", type: "GET", data: (class).innerText, cache: false, success: function (html) { //add the content retrieved from ajax and put it in the #content div $('#content').html(html); //display the body with fadeIn transition $('#content').fadeIn('slow'); } }); } </script>