Thinkphp,JavaScript,html实现对数据表的修改(方法二)
来源:互联网 发布:java高并发高可用 编辑:程序博客网 时间:2024/05/17 05:16
哎呀,虽然这个理论上来说不是太难,对各位大神来说很easy啊,但是还是纠结了我一个多小时滴,实现了还是很开心啊,我想实现这样一个效果,当点击修改时,页面从原来的不可编辑状态变成可编辑状态。前两天做对数据的修改时,使用的是跳到一个新的模板页,然后进行修改,可是这样做又要增加一个新的页面,而且不容易快速的找到想修改的项,也勉强算是用户体验性不高吧。今天使用的方法是这样的,当数据表中没有数据时,页面显示为空的文本框,当数据表中有数据时,则将数据表中的数据直接显示在相应位置,如图:
这个页面的代码实现我使用了thinkphp中的if标签实现的,当数据表中的某个属性值为空时则显示为文本框,不为空则调出来显示在页面中,代码如下
<if condition="$list.Schoolname neq ''"> <span name="name"><strong>{$list.Schoolname}</strong> </span> <else/><input type="text" name="name" class="inp"/></if>
使用if标签来判断我所需要的值是否为空。
condition="$xxx neq ''"的意思是$xxx不为空,具体的可以参考thinkphp的手册,还可以调用自己的函数,这个我还没看......
现在假设每个属性都不为空,有需要对数据进行修改,当点击修改按钮时,原来不可编辑的部分全部变成文本框,而且之前的内容还显示在文本框中,如下图所示:
这里就使用到了JavaScript的方法了,
if condition="$list neq ''"> <a href="javascript:void(0)" class="edit" >[修改]</a></if>点击修改时的html代码处理如上,
再在JavaScript中用if语句判断,有些显示多行输入文本控件,有些显示文本框,当然保存按钮也可以做相对处理(当点击修改时,才需要对修改的内容进行更改保存,不可编辑状态下不需要),
$('.edit').click(function(){$('span').each(function(){var value = $(this).text();var name = $(this).attr('name');if ((name=='version')){$(this).after('<textarea rows="6" cols="50" name="'+name+'">'+value+'</textarea>');} else if((name=='submit')){ $(this).after('<input name="'+name+'" type="submit" class="sub" value="保存"/>'); } else{$(this).after('<input type="text" name="'+name+'" value="'+value+'" class="inp"/>');}$(this).remove();})})JavaScript是个好东西啊,还是要好好学学
这都是自己的理解,如果有说的不对,请大家多多指教,谢谢
0 0
- Thinkphp,JavaScript,html实现对数据表的修改(方法二)
- SAP修改数据表(tables)的方法
- thinkphp修改数据表时怎么实现字段自加1
- ThinkPhp实现表单创建(数据表添加)
- thinkphp 对数据表的列名进行大小写转换
- JDBC对数据表的基本操作(JDBC之二)
- mysql从零开始(二)对数据表的操作
- ThinkPHP的数据表操作
- thinkPHP 数据表的操作
- THINKPHP 提供数据表联合查询的简单方法
- ThinkPHP的查询方法二
- 使用游标修改数据表的方法SQL2005
- mysql数据库修改数据表引擎的方法
- Javascript二:如何实现Javascript/css与HTML的分离
- ALV 简单实现HTML抬头的方法 (介绍 二)
- JavaScript中实现键值对的方法
- JSP实现HTML网页对Mysql数据库的数据修改
- ThinkPHP实现对数据库中表的修改删除以及两种原生SQL语句的执行
- View的scrollTo(),scrollBy()以及Scroller,OverScroller
- “2014全球未来网络与SDN技术大会”精彩剪辑(上)
- hdu 4635 Strongly connected (强连通分量缩点)
- 使用ngrok让微信公众平台通过80端口访问本机
- JDK中的URLConnection参数详解
- Thinkphp,JavaScript,html实现对数据表的修改(方法二)
- Yii----Cookie
- Python 日期循环操作的两中方法
- mtk android 4.4.2系统, 添加ethernet
- 设计模式解读之一: 策略模式
- WebKit 框架一瞥(A Look at the WebKit Framework) – Part 1
- java 怎样做出完美动画,(包括透明效果)
- IOS中判断身份证号的正则表达式
- 应用退出,关闭所有的activity