thinkphp里面怎么实现弹出div并传到后台可以存进数据库,望大神帮助。

http://img.mukewang.com/582d24e700010dba18960622.jpg

这是我想实现的效果,需要一点击编辑按钮然后就弹出那个div,点击确定,就可以把这些数据传到后台然后存到数据库

我现在的效果是点击编辑然后就会跳到下一个页面,然后正常提交存到数据库。

这是我的前台页面,用thinkphp写的,没用的居多,我想实现如图的效果应该怎么搞,希望大神可以提供个思路,我的问题主要是传值的是把那些值都获取到应该怎么传到后台。。最好可以来代码,代码太麻烦的话可以来思路,望大神指点一二,

我把编辑页面也传上来了,在主页面代码后面。跪求大神帮助呀

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="__PUBLIC__/__PUBLIC__/js/jquery.js"></script>

</head>

<body>

<div class="place">

    <span>位置:</span>

    <ul class="placeul">

    <li><a href="#">首页</a></li>

    <li><a href="#">数据表</a></li>

    <li><a href="#">基本内容</a></li>

    </ul>

    </div>

    

    <div class="rightinfo">

    

    <div class="tools">

    

    <ul class="toolbar">

        <li class="click"><span><a href="{:U('Index/addRest')}"><img src="__PUBLIC__/images/t01.png" /></span>添加文章</a></li>

        <li class="click"><span><img src="__PUBLIC__/images/t02.png"  /></span>修改</li>

        <li><span><img src="__PUBLIC__/images/t03.png" /></span>删除</li>

        <li><span><img src="__PUBLIC__/images/t04.png" /></span>统计</li>

        </ul>

        

        

        <ul class="toolbar1">

        <li><span><img src="__PUBLIC__/images/t05.png" /></span>设置</li>

        </ul>

    

    </div>

    

    

    <table class="tablelist">

    <thead>

    <tr>

        <th><input name="" type="checkbox" value="" checked="checked"/></th>

        <th>编号<i class="sort"><img src="__PUBLIC__/images/px.gif" /></i></th>        

        <th>标题</th>

        <th>文章属性</th>

        <th>饭店名称</th>

        <th>饭店分类</th>

        <th>饭店属性</th>

        <th>所在区</th>

        <th>地址</th>

        <th>电话</th>

        <th>操作</th>

        

        </tr>

        </thead>

   <tbody>        

         <tr>       

      <foreach name='list' item='v'>

    <tr>

        <td><input name="" type="checkbox" value="" /></td>

         <td>{$v.id}</td>

    <td><a href="{$v.url}">{$v.title}</a></td>

        <td>{$v.nature}</td>

        <td>{$v.name}</td>

        <td>{$v.type}</td>

        <td>{$v.attr}</td>

        <td>{$v.area}</td>

        <td>{$v.address}</td>

        <td>{$v.phone}</td>

        <if condition="$v['reid'] neq null">

        <td>  <a href="{:U('Index/updateRest',array('reid' => $v['reid']) )}" class="tablelink" >修改</a>

                

        

        <a href="{:U('Index/delete',array('id' => $v['id'],) )}" class="tablelink"> 删除</a></td>

        <else/>

        <td><a href="{:U('Index/addRest',array('id' => $v['id']) )}" class="tablelink">添加</a>

        <a href="{:U('Index/delete',array('id' => $v['id']) )}" class="tablelink"> 删除</a></td>

        </if>

            

    </tr>

</foreach>

</tr> 

<tr>  

<td colspan='10' align='center'  >

{$page}<br/>

<form action="{:U('Index/showlist')}" method="post">

跳转到<input type="text" name="id" />

<input type="submit" value="跳转" /></form>

</td>

</tr>             

           </tbody>

    </table>

    

   <!--  

    <div class="pagin">

    <div class="message">共<i class="blue">1256</i>条记录,当前显示第&nbsp;<i class="blue">2&nbsp;</i>页</div>

        <ul class="paginList">

        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>

        <li class="paginItem"><a href="javascript:;">1</a></li>

        <li class="paginItem current"><a href="javascript:;">2</a></li>

        <li class="paginItem"><a href="javascript:;">3</a></li>

        <li class="paginItem"><a href="javascript:;">4</a></li>

        <li class="paginItem"><a href="javascript:;">5</a></li>

        <li class="paginItem more"><a href="javascript:;">...</a></li>

        <li class="paginItem"><a href="javascript:;">10</a></li>

        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>

        </ul>

    </div>

    -->

    

    

    

    

    

    

    </div>

    <script type="text/javascript">

$('.tablelist tbody tr:odd').addClass('odd');

</script>

</body>

</html>

这是编辑页面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Radio切换效果</title>


</head>

<body>

<style type="text/css">

 fieldset{width:378px;border:1px #B0C0D1 solid;padding:10px;}

 legend{background:#B0C0D1;padding:4px 10px;color:#fff;}

 #c{margin-top:10px;}

 .c1,.c2{width:378px;line-height:20px;}

 .c1{color:#014CC9;}

 .c2{color:#7E6095;}

 h3{font-size:16px;padding:5px 0;}

 .red{color:#BD0A01;}

</style>

<script type="text/javascript">

function radioShow(){

 var myradio=document.getElementsByName("nature");

 var div=document.getElementById("c").getElementsByTagName("div");

 for(i=0;i<div.length;i++){

  if(myradio[i].checked){

   div[i].style.display="block";

   }

   else{

   div[i].style.display="none";

   }

  }

 }

</script>

<form name="ck" action="{:U('Index/modify')}" method="post">

<fieldset>

 <legend>修改页面</legend>

  <label for="r1" class="red"><input name="nature" id="r1" type="radio" value="饭店介绍" checked="checked" onclick="radioShow();" />饭店介绍</label>

  <label for="r2" class="red"><input name="nature" id="r2" type="radio" value="菜品介绍" onclick="radioShow();" />菜品介绍</label>

<div id="c">

 <div class="c1"> 

<lable for="attr">

<input type="radio" name="attr" value="特价" >特价

<input type="radio" name="attr" value="金牌" >金牌</lable><br/>

<lable for="name">饭店名称:


<input type="text" name="name" value="{$rest.name}"/>

</lable><br/>

<lable for="id">

<input type="hidden" name="id" value="{$rest.id}"></input>

</lable><br/>

<lable for="type">饭店分类:

<select name="type">

<option value="{$rest.type}">{$rest.type}</option>

<option value="西餐">西餐</option>

<option value="火锅">火锅</option>

</select></lable><br/>

<lable for="phone">电话<input type="number" name="phone" value="{$rest.phone}"/></lable><br/>

<lable for="area">所在区:<select name="area">

<option value="道里区">道里区</option>

<option value="道外区">道外区</option>

<option value="南岗区">南岗区</option>

</select></lable><br/>

<lable for="address">详细地址:<input type="text" name="address"value="{$rest.address}" /></lable><br/>

</div>

<input type="submit" value="确定"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重写" /><br/>

 <div class="c2" style="display:none;">

 

 </div>

</div>

</fieldset>

</form>

</body>

</html>


phper12138
浏览 2732回答 2
2回答

Tobey_滔

点一句:使用ajax

ccnucrazy

用js取填写的数据,然后通过ajax异步提交到后端
打开App,查看更多内容
随时随地看视频慕课网APP