热搜:NVER node 开发 php

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

2024-09-19 23:00:02
php条件下如何实现点击左边记录名,具体内容在页面右边显示?

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


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


回复讨论(解决方案)

用ajax做吧

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

谢谢回复。

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

万分感激啊。

稍等我给你写个demo

万分感谢先。

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");	?>	<?php foreach($data as $each){?>		<?php echo $each['col3'];?>	<?php } ?>	
id col1 col2 col3 col4
         


处理请求页
<?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 .= "".$each."";			}		}		echo json_encode($html);exit;	}?>

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

改之

非常感谢!

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

追问:

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

追问:

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

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

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

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

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

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");	?>	<?php foreach($data as $each){?>		<?php echo $each['col3'];?>	<?php } ?>	
id col1 col2 col3 col4
         


处理请求页
<?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 .= "".$each."";			}		}		echo json_encode($html);exit;	}?>


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

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

谢谢先啊。

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

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

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

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

现有的输入表单大致为:
form action="main/inputDriver.php" method="post">


选项一


// 其中一些格式规定,这里略去


选项二



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

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

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

如果是前者 直接输出为
form action="main/inputDriver.php" method="post">


选项一


// 其中一些格式规定,这里略去


选项二


至于这个 checked="checked"出现在哪里,在ajax指向的php程序里判断和输出

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



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

如果是前者 直接输出为
form action="main/inputDriver.php" method="post">


选项一


// 其中一些格式规定,这里略去


选项二


至于这个 checked="checked"出现在哪里,在ajax指向的php程序里判断和输出

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


好好体会一下先。

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

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

如果是前者 直接输出为
form action="main/inputDriver.php" method="post">


选项一


// 其中一些格式规定,这里略去


选项二


至于这个 checked="checked"出现在哪里,在ajax指向的php程序里判断和输出

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


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

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

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");	?>	<?php foreach($data as $each){?>		<?php echo $each['col3'];?>	<?php } ?>	
id col1 col2 col3 col4
         


处理请求页
<?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 .= "".$each."";			}		}		echo json_encode($html);exit;	}?>


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




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

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

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

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

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

这里先谢谢了。

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");?>	<?php foreach($data as $each){?>		<?php echo $each['col3'];?>	<?php } ?>	
id col1 col2 col3 col4 性别
         




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

用ajax做吧

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

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");?>	<?php foreach($data as $each){?>		<?php echo $each['col3'];?>	<?php } ?>	
id col1 col2 col3 col4 性别
         




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


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

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

外边方框不见了?   那你仔细观察下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部分的代码为:
 


     
       
       
        
      

driver type:


            short time   
            long time
        


js部分代码,上面已经贴过,就这么多了。

外边方框不见了?   那你仔细观察下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我以为这是指选项对应的值,晕死。改回来了。

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

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

你需要 jquery手册 

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

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

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

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

你需要 jquery手册 

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

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

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

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


  


        
              
                    
               
             

                  
                              
                                   
                                           
                                    
                              
                  

driver type:


                                          short time   
                                          long time
                                    


                
                    
                                           
                            
                    
                    
                      
                
                                           
                    
                    
                    
                      
                      
                      
                      
                    

                    
                      
                      
                      
                    

                   
                      
                      
                           
                    
                   

                        

firstname:


                      
  
                                               
                      

                        

lastname:


                      
                       
                                                  
                      

                        

ID number:


                      
                        
                                                  
                      

                        

mobile:


                      
                       
                                                                     
                      

                        

email:


                      
                   
                                                                     
                      


                  
                      
                          
                      
                   
 
                            


                           
                            


                          

                   
                
                




这个是一整段这部分的代码,包括各个方框的前后内容。
我怀疑是不是...中包含导致填进去ajax返回的内容时,...也被替换了?

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

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

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

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


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

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

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

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

把数值插入input的value中,这个又应该怎么改呢?

你说“给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化”,意思其实是不仅td可以用,像

都可以这样用是么?

还有,我看demo以及我随之也用的是$(".show_6").text(..),但ajax中还有$.post()这个函数时,好像就写成$("#show_6").text(..),这两个.show_6和#show_6是不能混用的吧?

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


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

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

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

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

把数值插入input的value中,这个又应该怎么改呢?

你说“给你写的td.html(xxx) 并不是一定要死板的这么写 你td里边有内容 就随之变化”,意思其实是不仅td可以用,像

都可以这样用是么?

还有,我看demo以及我随之也用的是$(".show_6").text(..),但ajax中还有$.post()这个函数时,好像就写成$("#show_6").text(..),这两个.show_6和#show_6是不能混用的吧?

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

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

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


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

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

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

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