php条件下如何实现点击左边记录名,具体内容在页面右边显示?

歪着看世界 2013-07-30 03:11:21
我做了一个网页,左边的一列是逐条显示的记录名,是我通过循环语句从mysql中读取并每行显示出来的。而右边是每条记录的具体内容框架(就是很多空框)。希望实现的目标是:点击左边任何一条记录名称,在右边的各个空框中就具体显示出该记录具体内容(其实就是每个字段的内容给填充到每个空框中去)。
该用怎样的简单框架实现左边的记录名称可点击呢?然后又传递什么变量来控制读取记录,把具体记录信息从mysql读取出来呢(貌似有了该记录内容,显示在各个空框中不难,我可以完成这一步)?当然该每条记录的具体内容在mysql都已经存在,查询即可。


这里的大牛们请多多帮忙啊,这是我第一次问问,事关紧急啊。谢谢。
...全文
690 40 打赏 收藏 转发到动态 举报
写回复
用AI写文章
40 条回复
切换为时间正序
请发表友善的回复…
发表回复
a1464684788 2013-07-31
  • 打赏
  • 举报
回复
用ajax做吧 当你点击左侧的记录名时,将记录名用ajax传到后台去查询对应的全部信息 返回后填充至框框内
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 39 楼 u011552243 的回复:
[quote=引用 37 楼 anyilaoliu 的回复:] 先结贴吧我们继续讨论就是 这些问题比较简单就不再阳面来回顶起了... 结贴进入一般人不看的阴面 继续讨论就是
已经结贴。 非常感谢你啊。[/quote] 另外,我开了一个新帖,欢迎指导啊。
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 37 楼 anyilaoliu 的回复:
先结贴吧我们继续讨论就是 这些问题比较简单就不再阳面来回顶起了... 结贴进入一般人不看的阴面 继续讨论就是
已经结贴。 非常感谢你啊。
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
你先试试 jquery的选择器是非常灵活的 可以各种套用
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
先结贴吧我们继续讨论就是 这些问题比较简单就不再阳面来回顶起了... 结贴进入一般人不看的阴面 继续讨论就是
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
可以混用 都是选择器而已对jquery来说并没有任何区别 比如 $(".show_tr > td:eq(1)").text(msg.col1); 既然你td内有input并且不能把input粗暴的替换掉 可以写成 $(".show_tr > td:eq(1) >input").val(msg.col1);
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
demo地址 http://www.colg.biz/demo/d1.php

表结构和内容



显示页面代码

<?php
//PHP区域
header("Content-Type:text/html;charset=utf-8");
mysql_connect('localhost','xxxxxx','xxxxxxxxxx');
mysql_select_db('xxxxxxxx');
function getdata($sql)
{
$result=mysql_query($sql);
if($result)$count = mysql_num_rows($result);
for($i=0;$i<$count;$i++)
{
mysql_data_seek($result,$i);
$data[$i] = mysql_fetch_assoc($result);
}
return $data;
}
$data = getdata("select * from demo");
?>

<!--CSS区域-->
<style type="text/css">
.left{float:left;width:100px;border:1px solid grey;height:300px;}
.right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;}
.left_button{margin:5px;border:1px solid #ccc;cursor:pointer;}
td{margin:1px;border:1px solid #ccc;}
</style>


<!--JS区域-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".left_button").click(function(){
$(this).css("background","#EEE");
$(this).siblings().css("background","white");
var n = $(this).text();
$.ajax({
type:"get",
url:"ajax.php",
data:{
n:n
},
success:function(msg){
msg = eval("("+msg+")"); //将json字符串转化为js数组对象
$(".show_tr > td:eq(0)").text(msg.id); //将数组的每个元素写到指定位置
$(".show_tr > td:eq(1)").text(msg.col1);
$(".show_tr > td:eq(2)").text(msg.col2);
$(".show_tr > td:eq(3)").text(msg.col3);
$(".show_tr > td:eq(4)").text(msg.col4);
var gender = msg.gender;
if(gender == 1){ //如果为男,第一个单选被选中
$(".show_tr > td:eq(5) > input[name='gender']:eq(0)").attr("checked","checked");
}else{ //如果为女
$(".show_tr > td:eq(5) > input[name='gender']:eq(1)").attr("checked","checked");
}
}
});
});

});

</script>


<!--html区域-->
<div class="left">
<?php foreach($data as $each){?>
<div class="left_button"><?php echo $each['col3'];?></div>
<?php } ?>
</div>
<div class="right">
<table>
<tr>
<td>id</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>性别</td>
<tr>
<tr class="show_tr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
<tr>
</table>
</div>




ajax接收处理页面代码

<?php
header("Content-Type:text/html;charset=utf-8");
mysql_connect('localhost','xxxxxxxx','xxxxxxxxx');
mysql_select_db('xxxxxxxx');
mysql_query("set names utf8");
function getdata($sql)
{
$result=mysql_query($sql);
if($result)$count = mysql_num_rows($result);
for($i=0;$i<$count;$i++)
{
mysql_data_seek($result,$i);
$data[$i] = mysql_fetch_assoc($result);
}
return $data;
}

if($_GET){
$n = $_GET['n'];
$data = getdata("select * from demo where col3 = '$n'");
echo json_encode($data[0]);exit;
}
?>


返回数组用JS分析后插入指定位置 不管你是什么结构都可以实现 万变不离其宗
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 34 楼 u011552243 的回复:
[quote=引用 33 楼 anyilaoliu 的回复:] 你以前是input的边框 现在input都被你替换掉了 有两个解决方案 一是直接把数值插入input的value中 二是还按现在的写 然后给td加边框让其看起来像之前的 给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化
把数值插入input的value中,这个又应该怎么改呢? 你说“给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化”,意思其实是不仅td可以用,像<p><div><tr>都可以这样用是么? 还有,我看demo以及我随之也用的是$(".show_6").text(..),但ajax中还有$.post()这个函数时,好像就写成$("#show_6").text(..),这两个.show_6和#show_6是不能混用的吧? 这个问题问到现在,太感谢了。[/quote] 使用$.ajax()时,所需要填入的区域用class=".."来标记,而使用$.post()时,是用id=“..”来标记的。这两种标记方式可以混用么?或者是$.ajax()也可以用$("#show_6").text(..),但此时必须用id=“..”来标记?
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 33 楼 anyilaoliu 的回复:
你以前是input的边框 现在input都被你替换掉了 有两个解决方案 一是直接把数值插入input的value中 二是还按现在的写 然后给td加边框让其看起来像之前的 给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化
把数值插入input的value中,这个又应该怎么改呢? 你说“给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化”,意思其实是不仅td可以用,像<p><div><tr>都可以这样用是么? 还有,我看demo以及我随之也用的是$(".show_6").text(..),但ajax中还有$.post()这个函数时,好像就写成$("#show_6").text(..),这两个.show_6和#show_6是不能混用的吧? 这个问题问到现在,太感谢了。
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
你以前是input的边框 现在input都被你替换掉了 有两个解决方案 一是直接把数值插入input的value中 二是还按现在的写 然后给td加边框让其看起来像之前的 给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 28 楼 anyilaoliu 的回复:
这个eq(n) 指的是查找符合条件的第n项,从0开始, 比如你这个<input type="radio" name="type" value="1"> 就是eq(0),而第二个就是eq(1) 跟你input的value值没有任何的关系 你:eq(2) 找的就是第三项 而没有第三个input自然找不到了 第二个可能你原来所谓的方框是input? 把这段HTML代码提出来看看
<div id="PKPage"> <table> <tr valign="top"> <td> <table style="padding-bottom:10px;"> <tr valign="middle"> <td width="128px"><p><strong>driver type:</strong></p></td> <form action="main/inputDriver.php" method="post"> <td class="show_1"> <input type="radio" name="type" value="1"> short time</input> <input type="radio" name="type" value="2"> long time</input> </td> </tr> </table> <table> <tr valign="top" > <td class="VPrub"> <p>firstname:</p> </td> <td class="show_2"> <input type="text" class="Vtextbox" name="firstname" > </td> </tr> <tr valign="top"> <td class="VPrub"> <p>lastname:</p> </td> <td class="show_3"> <input type="text" class="Vtextbox" name="lastname" > </td> </tr> <tr valign="top"> <td class="VPrub"> <p>ID number:</p> </td> <td class="show_4"> <input type="text" class="Vtextbox" name="socialNum" > </td> </tr> <tr valign="top"> <td class="VPrub"> <p>mobile:</p> </td> <td class="show_5"> <input type="text" class="Vtextbox" name="mobile" > </td> </tr> <tr valign="top"> <td class="VPrub" > <p>email:</p> </td> <td class="show_6"> <input type="text" class="Vtextbox" name="email" > </td> </tr> </table> <table style="padding-top:14px;"> <tr> <td> <p> <input type="submit" value="Spara profilkort" class="blue_btn"> </p> </td> </tr> </table> </form> </td> </tr> </table> </div> 这个是一整段这部分的代码,包括各个方框的前后内容。 我怀疑是不是<td>...</td>中包含<input....>导致填进去ajax返回的内容时,<td>...</td>也被替换了?
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 29 楼 anyilaoliu 的回复:
你需要 jquery手册 http://pan.baidu.com/share/link?shareid=1727812312&uk=3909167861
谢谢啊,受教。我刚入行没多久,正需要这个。
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 28 楼 anyilaoliu 的回复:
这个eq(n) 指的是查找符合条件的第n项,从0开始, 比如你这个<input type="radio" name="type" value="1"> 就是eq(0),而第二个就是eq(1) 跟你input的value值没有任何的关系 你:eq(2) 找的就是第三项 而没有第三个input自然找不到了 第二个可能你原来所谓的方框是input? 把这段HTML代码提出来看看
事情急了,说的也乱了。现在解决了单选项的问题,但方框的问题还没有解决。我也搞不清楚哪里出了问题。
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
你需要 jquery手册 http://pan.baidu.com/share/link?shareid=1727812312&uk=3909167861
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
这个eq(n) 指的是查找符合条件的第n项,从0开始, 比如你这个<input type="radio" name="type" value="1"> 就是eq(0),而第二个就是eq(1) 跟你input的value值没有任何的关系 你:eq(2) 找的就是第三项 而没有第三个input自然找不到了 第二个可能你原来所谓的方框是input? 把这段HTML代码提出来看看
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 25 楼 anyilaoliu 的回复:
外边方框不见了? 那你仔细观察下html结构 只改需要改的数据不动其他的东西 只改数据绝对不会引起方框不见吧 除非是长度高度问题导致CSS没有约束到 2.eq(1) 找的是第二个 eq(2) 找的是第三个 你确定你没写错? 另外可以这样写 var type = msg.type; if(type == 1) { $(".show_1 > input[name='type']:eq(1)").attr("checked","checked"); $(".show_1 > input[name='type']:eq(2)").removeAttr("checked"); } else { $(".show_1 > input[name='type']:eq(2)").attr("checked","checked"); $(".show_1 > input[name='type']:eq(1)").removeAttr("checked"); } 另外 type之类的关键字用起来看得心惊肉跳的..... 希望这种地方不要出问题
晕死,第一个问题解决了。应该是eq(0)和eq(1)。针对第二个demo我以为这是指选项对应的值,晕死。改回来了。
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 25 楼 anyilaoliu 的回复:
外边方框不见了? 那你仔细观察下html结构 只改需要改的数据不动其他的东西 只改数据绝对不会引起方框不见吧 除非是长度高度问题导致CSS没有约束到


2.eq(1) 找的是第二个 eq(2) 找的是第三个 你确定你没写错?
另外可以这样写

var type = msg.type;
if(type == 1)
{
$(".show_1 > input[name='type']:eq(1)").attr("checked","checked");
$(".show_1 > input[name='type']:eq(2)").removeAttr("checked");
}
else
{
$(".show_1 > input[name='type']:eq(2)").attr("checked","checked");
$(".show_1 > input[name='type']:eq(1)").removeAttr("checked");
}

另外 type之类的关键字用起来看得心惊肉跳的..... 希望这种地方不要出问题


谢谢先。
我这个第一选项赋值为1,第二选项赋值为2。我按照你给的语句运行了,结果是:每次值为2时,两个选项为空,值为1时,第二个选项为选中(但事实上,第二个选项应该值为2)。
我想哪里的细节正好有差错1.下面是代码(我把变量type改为driverType了):
var driverType = msg.type;
if(driverType == 1)
{
$(".show_1 > input[name='type']:eq(1)").attr("checked","checked");
$(".show_1 > input[name='type']:eq(2)").removeAttr("checked");
}
lse
{
$(".show_1 > input[name='type']:eq(2)").attr("checked","checked");
$(".show_1 > input[name='type']:eq(1)").removeAttr("checked");
}

2.至于方框不见了,运行的结果为:

但实际上,原来的状态为:

html部分的代码为:
<table style="padding-bottom:10px;">
<tr valign="middle">
<td width="128px"><p><strong>driver type:</strong></p></td>
<form action="main/inputDriver.php" method="post">
<td class="show_1">
<input type="radio" name="type" value="1"> short time</input>
<input type="radio" name="type" value="2"> long time</input>
</td>
</tr>
</table>

js部分代码,上面已经贴过,就这么多了。
再看我一眼 2013-07-31
  • 打赏
  • 举报
回复
外边方框不见了? 那你仔细观察下html结构 只改需要改的数据不动其他的东西 只改数据绝对不会引起方框不见吧 除非是长度高度问题导致CSS没有约束到 2.eq(1) 找的是第二个 eq(2) 找的是第三个 你确定你没写错? 另外可以这样写 var type = msg.type; if(type == 1) { $(".show_1 > input[name='type']:eq(1)").attr("checked","checked"); $(".show_1 > input[name='type']:eq(2)").removeAttr("checked"); } else { $(".show_1 > input[name='type']:eq(2)").attr("checked","checked"); $(".show_1 > input[name='type']:eq(1)").removeAttr("checked"); } 另外 type之类的关键字用起来看得心惊肉跳的..... 希望这种地方不要出问题
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 21 楼 anyilaoliu 的回复:
demo地址 http://www.colg.biz/demo/d1.php 表结构和内容 显示页面代码

<?php
	//PHP区域
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','xxxxxx','xxxxxxxxxx');
	mysql_select_db('xxxxxxxx');
	function getdata($sql)
	{
		$result=mysql_query($sql);
		if($result)$count = mysql_num_rows($result);
		for($i=0;$i<$count;$i++)
		{
			mysql_data_seek($result,$i);
			$data[$i] = mysql_fetch_assoc($result);
		}
		return $data;
	}
	$data = getdata("select * from demo");
?>

<!--CSS区域-->
<style type="text/css">
	.left{float:left;width:100px;border:1px solid grey;height:300px;}
	.right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;}
	.left_button{margin:5px;border:1px solid #ccc;cursor:pointer;}
	td{margin:1px;border:1px solid #ccc;}
</style>


<!--JS区域-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".left_button").click(function(){
			$(this).css("background","#EEE");
			$(this).siblings().css("background","white");
			var n = $(this).text();
			$.ajax({
				type:"get",
				url:"ajax.php",
				data:{
					n:n
				},
				success:function(msg){
						msg = eval("("+msg+")");	//将json字符串转化为js数组对象
						$(".show_tr > td:eq(0)").text(msg.id);		//将数组的每个元素写到指定位置
						$(".show_tr > td:eq(1)").text(msg.col1);
						$(".show_tr > td:eq(2)").text(msg.col2);
						$(".show_tr > td:eq(3)").text(msg.col3);
						$(".show_tr > td:eq(4)").text(msg.col4);
						var gender = msg.gender;
						if(gender == 1){		//如果为男,第一个单选被选中
							$(".show_tr > td:eq(5) > input[name='gender']:eq(0)").attr("checked","checked");
						}else{				//如果为女
							$(".show_tr > td:eq(5) > input[name='gender']:eq(1)").attr("checked","checked");
						}
				}
			});
		});

	});
	
</script>


<!--html区域-->
<div class="left">
	<?php foreach($data as $each){?>
		<div class="left_button"><?php echo $each['col3'];?></div>
	<?php } ?>
</div>
<div class="right">
	<table>
		<tr>
			<td>id</td>
			<td>col1</td>
			<td>col2</td>
			<td>col3</td>
			<td>col4</td>
			<td>性别</td>
		<tr>
		<tr	class="show_tr">
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
		<tr>
	</table>
</div>
ajax接收处理页面代码

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','xxxxxxxx','xxxxxxxxx');
	mysql_select_db('xxxxxxxx');
	mysql_query("set names utf8");
	function getdata($sql)
	{
		$result=mysql_query($sql);
		if($result)$count = mysql_num_rows($result);
		for($i=0;$i<$count;$i++)
		{
			mysql_data_seek($result,$i);
			$data[$i] = mysql_fetch_assoc($result);
		}
		return $data;
	}

	if($_GET){
		$n = $_GET['n'];
		$data = getdata("select * from demo where col3 = '$n'");
		echo json_encode($data[0]);exit;
	}
?>
返回数组用JS分析后插入指定位置 不管你是什么结构都可以实现 万变不离其宗
好一个万变不离其宗啊,我就根据你的demo的思路,结合了实际情况作了修改,基本功能实现了,但还存在一些小问题。首先我的修改方法是: 1.考虑到我的格式要复杂的多,试了多次未实现功能。我就每个把<td>....</td>都设置了不同的名字,比如: <td class="show_2"> <input type="text" class="Vtextbox" name="firstname" > </td> 然后在js部分,相应修改成: $(".show_2").text(msg.firstName); 这样就可以把从数据库得到的信息放到我指定的<td>....</td>中去了。 但这样一来,又冒出个问题:信息是放到指定的空框中去了,外面的方框不见了,而且顶格。我想在信息放进去后,<td>....</td>的格式信息和方框消失了,导致很不好看。其实,我需要的就是外面的方框而已,好歹好看点。 我想这是你第一版demo中需要echo 格式信息的原因。 那这个问题如何搞定呢? 2.还是单选项(关于类型的两个选项)的问题,在html区域,代码为: <td class="show_1"> <input type="radio" name="type" value="1"> 选项1</input> <input type="radio" name="type" value="2"> 选项2</input> </td> js部分,我修改为(数据库中字段为type): var type = msg.type; if(type == 1) { $(".show_1 > input[name='type']:eq(1)").attr("checked","checked"); } else { $(".show_1 > input[name='type']:eq(2)").attr("checked","checked"); } 但实际运行结果是当我点击左边记录名时,实际反应很奇怪。第一点击,单选项没有反应;从第二次点击开始,始终停留在第二选项。 不知道出了什么问题? 非常感谢啊。
歪着看世界 2013-07-31
  • 打赏
  • 举报
回复
引用 19 楼 anyilaoliu 的回复:
今天太晚了明天白天给你写.... 晚上的时间都给WOW了..
这里先谢谢了。
加载更多回复(20)

21,882

社区成员

发帖
与我相关
我的任务
社区描述
从PHP安装配置,PHP入门,PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧