后台无刷新修改字段js
生活随笔
收集整理的這篇文章主要介紹了
后台无刷新修改字段js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
視圖:
<tr data='{cid:"<?php echo $one['id']; ?>"}'><td width="40"><div class="dis"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/ico_edit.png" class="bt_modify" width="15" height="15"></div></td><td><span class="t"><?php echo $one['title']; ?></span><input type="text" class="input_s it" style="width:200px; display:none" value="<?php echo $one['title']; ?>"/></td></tr>js:
$(".tbody").mouseover(function(){$(this).find(".dis").show(); //鼠標移入行內圖標顯示}).mouseout(function(){$(this).find(".dis").hide();}); //移出消失$(".bt_modify").click(function(){$(this).parent().parent().parent().find(".t").hide(); //點擊圖片原字段隱藏$(this).parent().parent().parent().find(".it").show().focus(); //顯示并且選中input框});$(".it").blur(function(){$(this).hide();$(this).parent().find(".t").show();var data = eval('('+$(this).parent().parent().attr('data')+')');var cid = data.cid;var obj = $(this);var objSpan = $(this).parent().find(".t");var title = $.trim($(obj).val());var origin = $(objSpan).html();if (title == "") {$.messager.show({title:'提示',msg:'標題不能為空',showType:'fade',style:{right:'',bottom:''}});$(obj).val(origin);return false;}if (title == origin) {$(this).hide();$(this).parent().find(".t").show();} else {$.post('<?php echo Yii::app()->createUrl("content/edit") ?>',{'cid':cid,'title':title},function(data){if(data.code < 1){$.messager.alert("提示", data.message);} else {$(objSpan).html(title);$(obj).hide();$(objSpan).show();}},'json');}});
轉載于:https://www.cnblogs.com/fengzhiqiangcaisangzi/p/3380965.html
總結
以上是生活随笔為你收集整理的后台无刷新修改字段js的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: js 弹窗并定时关闭
- 下一篇: 安卓手机与PC不得不说的那些事 之 篇一