起一个名字，然后传一个主键值

1 str +="<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='详情' code='"+lie[0]+"'/></td></tr>";

2.想要显示的可以少一点，可以只显示名称和操作，这两列

1 2 3 4 5 6 7 8 <table width="50%"border="1"cellpadding="0"cellspacing="0"> 　　<tr> 　　　　<td>名称</td> 　　　　<td>操作</td> 　　</tr> 　　<tbody id="bg"> 　　</tbody> </table>

对于ajax的遍历时将div也写成两个

1 2 3 4 5 for(vari=0;i<hang.length;i++) 　　{ varlie = hang[i].split("^");//拆分字符串“^”:显示列 str +="<tr><td>"+lie[1]+"</td><td><input type='button' value='详情' code='"+lie[0]+"'/></td></tr>"; 　　}

效果如图：

注意：这里的对添加窗口有两种方法，一个是用自己写好的封装类，二是可以用bootstrap的弹窗

一是用自己写好的封装类

3.1 对“详情”进行编写的时候可以使用封装好的弹窗js，引入弹窗js还有弹窗的样式表，应为封装的js语句很多，js显示基本功能如下：

1 2 3 4 5 6 7 width : config.width || 300,//宽度 height : config.height || 200,//高度 buttons : config.buttons ||'',//默认无按钮 title : config.title ||'标题',//标题 content : config.content ||'内容',//内容 isMask : config.isMask == false?false:config.isMask || true,//是否遮罩 isDrag : config.isDrag == false?false:config.isDrag || true,//是否移动

4.1 根据上面的主键值，对详情按钮添加事件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $(".xiangqing").click(function(){//对详情添加单击事件 varcode = $(this).attr("code"); $.ajax({ url:"chakancl.php",//详情的处理页面 data:{c:code},//传入处理页面的值 type:"POST",//传值方式 dataType:"TEXT", success:function(d){ varlie = d.split("^");<br>　　　　　　　　　　　　　　//想要在窗口中显示的内容 varc ="<div>代号："+lie[0]+"</div><div>姓名："+lie[1]+"</div><div>性别："+lie[2]+"</div><div>民族："+lie[3]+"</div><div>生日："+lie[4]+"</div>";<br>　　　　　　　　　　　　　　//调用封装好的弹窗方法 varwin =newWindow({ width : 300,//宽度 height : 200,//高度 buttons :'',//默认无按钮 title :'详情介绍',//写入显示的标题 content : c,//内容 isMask : true,//有遮罩 isDrag : true,//能够移动 }) } }) })

5.1 编写详情的处理页面：就是根据传过去的code找到代号那一列，然后执行就可以，当然是字符串形式的数据，就要进行转换

这是封装类中的字符函数里的：

1 2 3 4 5 6 7 //执行语句后是个二维数组，下面进行字符串装换<br>$str = ""; foreach($attras$v) { $str.= implode("^",$v)."|";//拼接数组为字符串implode（）方法 } returnsubstr($str,0,strlen($str)-1);//截取字符串：最后的拼接符不显示substr（）方法

处理页面的代码编写

1 2 3 4 5 6 7 8 <?php include("DBDA.class.php"); $db=newDBDA(); $code=$_POST["c"]; $sql="select * from fruit where ids='{$code}'"; echo$db->StrQuery($sql);　　

最后就是走起来看效果，单击详情按钮后，就会显示窗口了

单击桔子后面的详情按钮，就弹出窗口：

二是用bootstrap的弹窗

3.1首先也要引入bootstrap的js和css包：

1 2 <script src="dist/js/bootstrap.min.js"></script> <link href="dist/css/bootstrap.min.css"rel="stylesheet"type="text/css"/>

3.2在主体部分写入弹窗：直接从bootstrap的官网进行复制粘贴就可以

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!-- 模态框（Modal） --> <divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <button type="button"class="close"data-dismiss="modal"aria-hidden="true">×</button> <h4class="modal-title"id="myModalLabel">详细信息</h4>//标题的地方 </div> <divclass="modal-body"id="content"></div>// 显示是内容的地方 <divclass="modal-footer"> <button type="button"class="btn btn-default"data-dismiss="modal">关闭</button>//按钮 </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>

3.3在进行显示数据时记得在遍历结束时，在详情按钮中加入属性

1 <td><input type='button'value='详情'class='xiangqing'code='"+lie[0]+"'data-toggle='modal'data-target='#myModal'/></td>

3.4在详情的单击事件遍历结束后要将内容写入上面的“显示的内容”的地方