修改和添加关于数据库的信息，可以用于任何的添加和修改这些数据库和前面的随笔数据库是一样的
一、显示出数据库中的信息
（1）显示的效果也可以是用bootstrap的标签页显示（前面一定要引入bootstrap）
<ul> <li ><a href="#home" data-toggle="tab"> 饭面类</a> </li> <li><a href="#ios" data-toggle="tab">特色小吃</a></li> <li> <a href="#"data-toggle="dropdown">酒水饮品 <b></b> </a> <ul role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab"> 酒水</a> </li> <li><a href="#ejb" tabindex="-1" data-toggle="tab"> 饮品</a> </li> </ul> </li> </ul>
二、修改内容
（1）标题显示之后，就是每一个标题中的内容了，可以用ajax遍历
<p> </p>
（2）进行数据库遍历
$.ajax({ url:"mianlei.php", //编写处理页面 dataType:"TEXT", success: function(d){ var hang = d.split("|"); //拆分字符“|”串：显示行 var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); //拆分字符串“^”:显示列 str += "<input type='button' value='"+lie[2]+"' code='"+lie[1]+"' data-toggle='modal' data-target='#myModal'/> "; } $("#mian").html(str); //把遍历的内容写在上面的 } })
（3）处理页面的编写如下
<?php include("DBDA.php"); //调用封装好的数据库类 $db = new DBDA(); $sql = "select * from caidan where fcode =('1101')"; //查询符合父级号的所有信息 echo $db->StrQuery($sql); //输出结果
（4）然后进行修改的内容可以用模态框
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>修改</h4> </div> <div> <!--这里是显示的修改的内容--> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">提交</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
（5）修改的时候，里面要默认显示原来的名字和价格，所以要将前面遍历的代号传过来
$(".aa1").click(function(){ var code = $(this).attr("code"); //找到code值 $.ajax({ url:"xiugaichuli.php", //编写处理页面 data:{c:code}, //将code值传过去 type:"POST", dataType:"TEXT", success: function(d){ var hang = d.split("|"); //拆分字符“|”串：显示行 var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); //拆分字符串“^”:显示列 str += "<div>名称：<input type='text' value='"+lie[2]+"' code='"+lie[1]+"' /></div><br /><div>价格：<input type='text' value='"+lie[0]+"' code='"+lie[1]+"' /></div>"; } $("#content").html(str); //写入模态框中的content的位置 } }) })
（6）单击提交按钮后写入数据库，并且这里也修改了，单击提交按钮进行修改
$("#tijiao").click(function(){ var code = $(".name").attr("code"); //找到名称中的代号 var code = $(".price").attr("code"); //找到价格的代号 var name = $(".name").val(); //找到名称的值 var price = $(".price").val(); //找到价格的值 $.ajax({ url:"tjsk.php", //处理页面的编写 data:{n:name,p:price,c:code}, //将值传到处理页面 type:"POST", dataType:"TEXT", success: function(data){ ///处理页面成功后输出 if(data.trim()=="ok") { alert("修改成功！"); } } }) })
三、添加内容
（1）同上面的写一个弹框，里面有文本框
<div data-toggle='modal' data-target='#myModall'>添加菜品</div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>添加菜品</h4> </div> <div> <div>名称：<input type="text"/></div> <br /> <div>价格：<input type="text"/></div> </div> <div> <button type="button">提交</button> </div> </div>