Php 如何将mysql结果链接到同一页面以显示更多详细信息
我有一个自动运行查询并在页面上显示结果的页面。 我想做的是,当单击一个结果时,它应该在同一页面上(可能在div中)显示该特定项的更多详细信息,但我不想为每个特定项编写div/页面,因为我从不断增长的数据库中获取结果 以下是显示结果的我的php的外观:Php 如何将mysql结果链接到同一页面以显示更多详细信息,php,mysql,variables,Php,Mysql,Variables,我有一个自动运行查询并在页面上显示结果的页面。 我想做的是,当单击一个结果时,它应该在同一页面上(可能在div中)显示该特定项的更多详细信息,但我不想为每个特定项编写div/页面,因为我从不断增长的数据库中获取结果 以下是显示结果的我的php的外观: while($row = mysql_fetch_array($result)){ if (strlen($row['companyname'])>0) { echo "<ul data-role='listvie
while($row = mysql_fetch_array($result)){
if (strlen($row['companyname'])>0) {
echo "<ul data-role='listview' data-inset='true'>
<li><a href='#'>
<h3>{$row['companyname']}</h3>
<p><b>Address:</b></p>
<p><b>Tel:</b>{$row['tel']} <b>Fax:</b>{$row['fax']}</p>
<p><b>Email:</b>{$row['email']}</p>
<p><b>Website:</b>{$row['website']}</p>
<p class='ui-li-aside'><strong>VIEW MORE</strong></p>
</a></li>
</ul>";
无论单击哪个结果,这只会给出我表格中的第一个结果:(
请帮助…谢谢PHP是服务器端。这意味着当该页面提供给用户时,您不能使用PHP对其进行编辑。如果您希望在同一页面上显示详细信息,您有两个选项: a) 将详细信息放入隐藏的div中,并通过单击查看更多链接来显示
注意:您需要jQuery才能使代码正常工作。那么您需要Javascript和jQuery来完成这项工作。 这是一个演示:我为你准备的 你可以从那里复制代码,或者 以下是HTML:
<table id="report"><tbody>
<tr class="odd">
<td class="left"> Company Name </td>
</tr>
<tr class="even" style="display: none;">
<td style=" border:1px solid #CCC;">
<p style="color:#656565;"> address</p>
<p style="color:#656565;"> tel </p>
<p style="color:#656565;"> email </p>
<p style="color:#656565;"> website </p>
</td>
</tr>
</tbody></table>
还有Javascript:
$(document).ready(
function(){
$('#report tbody tr:nth-child(odd)').addClass('odd');
$('#report tbody tr:nth-child(even)').addClass('even').hide();
$('tr.odd').click(
function(){
var that = $(this),
next = that.next('.even');
that.find('.arrow').toggleClass('up');
next.toggle().siblings('.even').hide();
$('.even:not(":visible")').each(
function(){
$(this).prev('.odd').find('.up').removeClass('up');
});
});
});
别忘了使用Jquery当单击一个结果时,它应该在同一页面上显示该特定项目的更多详细信息,因为我觉得您需要JavaScript。当您单击它时,它会显示更多结果,而无需转到其他页面。是吗?是的,是的,我不想走javascript的路,因为我在这方面很没用。当然,分享你的想法,即使是javascript。。如果这是唯一的办法,那么看看我的答案,还有其他人。他的代码非常紧凑,唯一的区别是,与我的代码相比,当你点击它发送时,它可以折叠起来。选中其中一个,别忘了选你喜欢的
<a href="#" onclick="$('#details1').css('display', 'block');return false;">View more</a>
<div style="display: none;" id="details1">Details here</div>
$.get('path/to/get_details.php', function(data)
{
$('#details1').html(data);
$('#details1').css('display', 'block');
});
<table id="report"><tbody>
<tr class="odd">
<td class="left"> Company Name </td>
</tr>
<tr class="even" style="display: none;">
<td style=" border:1px solid #CCC;">
<p style="color:#656565;"> address</p>
<p style="color:#656565;"> tel </p>
<p style="color:#656565;"> email </p>
<p style="color:#656565;"> website </p>
</td>
</tr>
</tbody></table>
#report { border-collapse:collapse; }
#report h4 { margin:0px; padding:0px;}
#report td { color:#000; padding:0px; }
#report tr.odd td { color:black; cursor:pointer; border-bottom:1px solid #CCC; }
#report tr.even td {background-color:#dadada; padding:10px 0px 15px 20px; }
#report tr.odd td.left {width: 1000px; }
#report tr.odd td.left b{font-size:18px; font-weight:normal;}
#report div.arrow { background:transparent url(../images/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; }
#report div.up { background-position:0px 0px; }
$(document).ready(
function(){
$('#report tbody tr:nth-child(odd)').addClass('odd');
$('#report tbody tr:nth-child(even)').addClass('even').hide();
$('tr.odd').click(
function(){
var that = $(this),
next = that.next('.even');
that.find('.arrow').toggleClass('up');
next.toggle().siblings('.even').hide();
$('.even:not(":visible")').each(
function(){
$(this).prev('.odd').find('.up').removeClass('up');
});
});
});