思路来源:昨天看淘宝的图片空间,发现了一个效果.
点击宝贝的名字,出现一个可编辑的文本框,然后ajax提交(如果数据变的话),改变数据
看图说明:
编辑完了提交进行修改数据
自己做的代码效果如下:
具体设置到的代码如下:
- <input class="t" id="t_<?php echo $option['order_id'];?>" readonly
- value="<?php echo $option['delivery_number'];?>"
- onclick="rename('<?php echo $option['order_id'];?>',$(this).val());" />
- <input type="button" value="Edit" style="display:none;"
- id="submit_<?php echo $option['order_id'];?>"
- onclick="xiugai('<?php echo $option['order_id'];?>','<?php echo $option['delivery_number'];?>')" />
放置两个input,对其id进行设置不同的值,用了两个方法 rename 和 xiugai
引用的css文件为:
- <style type="text/css">
- .thumb-name {
- height: 20px;
- line-height: 20px;
- margin-top: 2px;
- overflow: hidden;
- text-align: center;
- }
- input.t {
- border:1px solid #fff;
- background:#fff;
- }
- input.s {
- border:1px solid #369;
- background:#fff;
- }
- </style>
两个函数为:
- <script type="text/javascript">
- function rename(id,value){
- // console.log(id + ' ' + value);
- var test = document.getElementById("t_" + id);
- var mysubmit = document.getElementById("submit_" + id);
- test.readOnly = false;
- // test.select();
- test.className = "s";
- mysubmit.style.display = "";
- }
- function xiugai(id,old_value){
- //console.log(id + ' ' + old_value);
- //如果原始值和现在的值一样的话就不提交ajax.否则进行修改
- // console.log(old_value);
- var new_value = $('#t_'+id).val();
- // console.log(new_value);
- if(old_value == new_value){
- //console.log('不做任何修改');
- }else{
- //console.log('ajax 提交');
- $.ajax({
- type: "POST",
- url: "dj_order_delivery.php",
- data: "id=" + id + "&value=" + new_value,
- dataType: "html",
- beforeSend: function(XMLHttpRequest){
- //$('#' + ipz_id + '_img').toggle();
- },
- success: function(data, textStatus){
- //赋值
- //$('#main').html(data);
- //$('#' + ipz_id + '_img').toggle();
- //赋值给input元素
- $('#t_'+id).text(data);
- },
- complete: function(XMLHttpRequest, textStatus){
- },
- error: function(){
- },
- cache : false
- });
- }
- var test = document.getElementById("t_" + id);
- var mysubmit = document.getElementById("submit_" + id);
- //mysubmit.onclick = function(){
- test.readOnly = true;
- test.className = "t";
- mysubmit.style.display = "none";
- //}
- }
- </script>
《仿淘宝图片空间 点击文字 出现可编辑文本框 提交ajax数据到后台修改》由php代码分享整理编辑，转载请保留本文地址：http://www.phpsharer.com/263.html