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

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


这里的大牛们请多多帮忙啊，这是我第一次问问，事关紧急啊。谢谢。

40 个解决方案

#1

用ajax做吧

当你点击左侧的记录名时,将记录名用ajax传到后台去查询对应的全部信息 返回后填充至框框内

#2

谢谢回复。

采用ajax,小弟是新手，那大概用到哪些重要语句或者关键点，甚至有没有链接案例啥的让我琢磨琢磨呢？

万分感激啊。

#3

稍等我给你写个demo

#4

万分感谢先。

#5

demo地址  http://www.colg.biz/demo/d1.php

代码

显示页

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','colg_demo','colg__');
	mysql_select_db('colg_demo');
	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");

?>
<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>

<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+")")
					$(".show_tr").html(msg);
				}
			});
		});

	});

</script>

<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>
		<tr>
		<tr	class="show_tr">
			<td>　</td>
			<td>　</td>
			<td>　</td>
			<td>　</td>
			<td>　</td>
		<tr>
	</table>
</div>

处理请求页

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','colg_demo','colg__');
	mysql_select_db('colg_demo');
	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'");

		if($data){
			$html = "";
			foreach($data[0] as $each){
				$html .= "<td>".$each."</td>";
			}
		}
		echo json_encode($html);exit;
	}
?>

#6

汗...账号密码都泄露了....

改之

#7

非常感谢！

下个问题是：怎么把分数给你？是不是只是结贴即可？

#8

追问：

你这里分为主程序和处理页面程序，第二个处理页面程序应该就是ajax.php吧？ 似乎应该要求改ajax.php和住程序处在同一个目录下，对吧？

#9

引用 8 楼 u011552243 的回复:

追问：

你这里分为主程序和处理页面程序，第二个处理页面程序应该就是ajax.php吧？ 似乎应该要求改ajax.php和住程序处在同一个目录下，对吧？

完全可以不同一个目录 写路径就好了  研究下"html路径"

#10

非常感谢，这位大牛，这正是我想要的效果。

我再琢磨一下细节，若有细节问题，还请不吝赐教。

#11

不客气 都是新人,学习中 多多交流 共同进步 有问题直接提,可以引用我的回复这样我可以及时看到提醒

#12

引用 5 楼 anyilaoliu 的回复:

demo地址  http://www.colg.biz/demo/d1.php

代码

显示页

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','colg_demo','colg__');
	mysql_select_db('colg_demo');
	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");

?>
<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>

<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+")")
					$(".show_tr").html(msg);
				}
			});
		});

	});

</script>

<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>
		<tr>
		<tr	class="show_tr">
			<td>　</td>
			<td>　</td>
			<td>　</td>
			<td>　</td>
			<td>　</td>
		<tr>
	</table>
</div>

处理请求页

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','colg_demo','colg__');
	mysql_select_db('colg_demo');
	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'");

		if($data){
			$html = "";
			foreach($data[0] as $each){
				$html .= "<td>".$each."</td>";
			}
		}
		echo json_encode($html);exit;
	}
?>

在我想完成的这个页面中，右边的空框基本都是空框（基本如这个程序所显示的），但有一项是单选项（输入表单，采用radio的方法）。我这个页面的基本功能是在右边空框以及选择该单选项，点击右边下方保存键，则该记录存入mysql，同时该新记录在左边一列显示出来（已实现上述功能）。

现在我点击左边某记录，如你demo显示，应该能显示相关内容（我还在学习细节），但右边其中这项单选项显示有困难。比如，我从数据库中读取两选项其中之一的值（1或者2），如何在单选项上表示出呢（因为先前单选项前的小圆圈都是空心的，若选择了其中一项，变成实心的小圆圈）？

谢谢先啊。

#13

你是希望点击左侧后  右边两项都未选还是已选中其中一项?

它们的差别就是后者在选中的那个input标签内有一个  checked="checked" 而已

#14

引用 13 楼 anyilaoliu 的回复:

你是希望点击左侧后  右边两项都未选还是已选中其中一项?

它们的差别就是后者在选中的那个input标签内有一个  checked="checked" 而已

现有的输入表单大致为：
form action="main/inputDriver.php" method="post">
<p>
  <input type="radio" name="type" value="1"> 选项一</input>
</p>
// 其中一些格式规定，这里略去
<p>
  <input type="radio" name="type" value="2"> 选项二</input>
</p>

点击左侧后，记录信息在右边显示出来。而右边的这项单选项（有两个选项），我希望其中一项已经被选择，数据来自数据库（1或者2，而两选项的值在表单中已经设定）。问这个问题，主要担忧与前面的输入表单冲突，不能兼顾。

问你问题时，自己都感觉汗颜呐，我这个新手太新了。

#15

你ajax采用"PHP返回全部HTML"还是采用"PHP返回数组用js来处理"?

如果是前者  直接输出为
form action="main/inputDriver.php" method="post">
<p>
  <input type="radio" name="type" value="1"> 选项一</input>
</p>
// 其中一些格式规定，这里略去
<p>
  <input type="radio" name="type" value="2" checked="checked"> 选项二</input>
</p>
至于这个 checked="checked"出现在哪里,在ajax指向的php程序里判断和输出

如果采用后者,js处理数组时用相关字段进行判断并对需要选中的加上这个 checked="checked"即可.

#16

引用 15 楼 anyilaoliu 的回复:

你ajax采用"PHP返回全部HTML"还是采用"PHP返回数组用js来处理"?

如果是前者  直接输出为
form action="main/inputDriver.php" method="post">
<p>
  <input type="radio" name="type" value="1"> 选项一</input>
</p>
// 其中一些格式规定，这里略去
<p>
  <input type="radio" name="type" value="2" checked="checked"> 选项二</input>
</p>
至于这个 checked="checked"出现在哪里,在ajax指向的php程序里判断和输出

如果采用后者,js处理数组时用相关字段进行判断并对需要选中的加上这个 checked="checked"即可.

好好体会一下先。

这里，小弟先深深作揖谢过。

#17

引用 15 楼 anyilaoliu 的回复:

你ajax采用"PHP返回全部HTML"还是采用"PHP返回数组用js来处理"?

如果是前者  直接输出为
form action="main/inputDriver.php" method="post">
<p>
  <input type="radio" name="type" value="1"> 选项一</input>
</p>
// 其中一些格式规定，这里略去
<p>
  <input type="radio" name="type" value="2" checked="checked"> 选项二</input>
</p>
至于这个 checked="checked"出现在哪里,在ajax指向的php程序里判断和输出

如果采用后者,js处理数组时用相关字段进行判断并对需要选中的加上这个 checked="checked"即可.

结合我的问题，肯定是采用php返回数组的方式最好。
我仔细看了你的代码，在给你给出的demo中，是不是采用的是php返回全部html的方法？
如果我需要php返回数组的方式，那就需要demo部分中的程序，主要的是第二段程序中foreach循环该做如何细节改变呢？

呵呵，细节方面总是搞不出来。

#18

引用 5 楼 anyilaoliu 的回复:

demo地址  http://www.colg.biz/demo/d1.php

代码

显示页

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','colg_demo','colg__');
	mysql_select_db('colg_demo');
	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");

?>
<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>

<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+")")
					$(".show_tr").html(msg);
				}
			});
		});

	});

</script>

<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>
		<tr>
		<tr	class="show_tr">
			<td>　</td>
			<td>　</td>
			<td>　</td>
			<td>　</td>
			<td>　</td>
		<tr>
	</table>
</div>

处理请求页

<?php
	header("Content-Type:text/html;charset=utf-8");
	mysql_connect('localhost','colg_demo','colg__');
	mysql_select_db('colg_demo');
	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'");

		if($data){
			$html = "";
			foreach($data[0] as $each){
				$html .= "<td>".$each."</td>";
			}
		}
		echo json_encode($html);exit;
	}
?>

你提供的这个demo还是非常具有启发性的。在结合我的实际编程时，出现了不少问题，主要有：
1. ajax.php回复的信息是从mysql数据库中读取一个记录各个字段内容所连成的一串string，这正好与你demo中比较简单的空框相吻合，结果很不错。而我这个页面右方，不仅有单选项，其他空框之间有文字（其实就是该空框内容的说明文字），而且还有很多格式设定的代码。为了达成前面输入表单的结果，空框里虽空，但里面实际上有代码，比如：
<td>                        
  <input type="text" class="Vtextbox" name="firstname">
</td>

所以demo中采用全部html返回形式，我很难把内容分割开嵌入各个空框中。所以，今天试了很长时间，结论是采用JS数组把从mysql查询的内容进行返回，这是比较好的方式。但代码该如何变化呢？

2.上面的问题是主要问题，如果上面这个问题解决了，我就可以自己进行判断，并在单选项中采用check="checked"的方法解决了。

花了好长时间来试，最终总结为这个问题。呵呵，求助啊。

#19

今天太晚了明天白天给你写.... 晚上的时间都给WOW了..

#20

引用 19 楼 anyilaoliu 的回复:

今天太晚了明天白天给你写.... 晚上的时间都给WOW了..

这里先谢谢了。

#21

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分析后插入指定位置 不管你是什么结构都可以实现 万变不离其宗

#22

用ajax做吧

当你点击左侧的记录名时,将记录名用ajax传到后台去查询对应的全部信息 返回后填充至框框内

#23

引用 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分析后插入指定位置 不管你是什么结构都可以实现 万变不离其宗

非常感谢。
是啊，正在学习“宗”，细节体会中。

#24

引用 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");
} 

但实际运行结果是当我点击左边记录名时，实际反应很奇怪。第一点击，单选项没有反应；从第二次点击开始，始终停留在第二选项。
不知道出了什么问题？

非常感谢啊。

#25

外边方框不见了?   那你仔细观察下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之类的关键字用起来看得心惊肉跳的..... 希望这种地方不要出问题

#26

引用 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部分代码，上面已经贴过，就这么多了。

#27

引用 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我以为这是指选项对应的值，晕死。改回来了。

#28

这个eq(n)  指的是查找符合条件的第n项,从0开始,  比如你这个<input type="radio" name="type" value="1">  就是eq(0),而第二个就是eq(1)
跟你input的value值没有任何的关系
你:eq(2) 找的就是第三项  而没有第三个input自然找不到了

第二个可能你原来所谓的方框是input? 把这段HTML代码提出来看看

#29

你需要 jquery手册 

http://pan.baidu.com/share/link?shareid=1727812312&uk=3909167861

#30

引用 28 楼 anyilaoliu 的回复:

这个eq(n)  指的是查找符合条件的第n项,从0开始,  比如你这个<input type="radio" name="type" value="1">  就是eq(0),而第二个就是eq(1)
跟你input的value值没有任何的关系
你:eq(2) 找的就是第三项  而没有第三个input自然找不到了

第二个可能你原来所谓的方框是input? 把这段HTML代码提出来看看

事情急了，说的也乱了。现在解决了单选项的问题，但方框的问题还没有解决。我也搞不清楚哪里出了问题。

#31

引用 29 楼 anyilaoliu 的回复:

你需要 jquery手册 

http://pan.baidu.com/share/link?shareid=1727812312&uk=3909167861

谢谢啊，受教。我刚入行没多久，正需要这个。

#32

引用 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>也被替换了？

#33

你以前是input的边框  现在input都被你替换掉了

有两个解决方案  一是直接把数值插入input的value中

二是还按现在的写  然后给td加边框让其看起来像之前的

给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化

#34

引用 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是不能混用的吧？

这个问题问到现在，太感谢了。

#35

引用 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是不能混用的吧？

这个问题问到现在，太感谢了。

使用$.ajax()时，所需要填入的区域用class=".."来标记，而使用$.post()时，是用id=“..”来标记的。这两种标记方式可以混用么？或者是$.ajax()也可以用$("#show_6").text(..)，但此时必须用id=“..”来标记？

#36

可以混用  都是选择器而已对jquery来说并没有任何区别


比如 $(".show_tr > td:eq(1)").text(msg.col1);

既然你td内有input并且不能把input粗暴的替换掉

可以写成 $(".show_tr > td:eq(1) >input").val(msg.col1);

#37

先结贴吧我们继续讨论就是 这些问题比较简单就不再阳面来回顶起了... 结贴进入一般人不看的阴面  继续讨论就是

#38

你先试试 jquery的选择器是非常灵活的 可以各种套用

#39

引用 37 楼 anyilaoliu 的回复:

先结贴吧我们继续讨论就是 这些问题比较简单就不再阳面来回顶起了... 结贴进入一般人不看的阴面  继续讨论就是

已经结贴。
非常感谢你啊。

#40

引用 39 楼 u011552243 的回复:

Quote: 引用 37 楼 anyilaoliu 的回复:

先结贴吧我们继续讨论就是 这些问题比较简单就不再阳面来回顶起了... 结贴进入一般人不看的阴面  继续讨论就是

已经结贴。
非常感谢你啊。

另外，我开了一个新帖，欢迎指导啊。