使用jQuery編輯刪除頁面內容,兩種方式


第一種,比較少的編輯用這種,直接在那塊內容上編輯,失去焦點即完成

前幾天做編輯框的時候,需要只修改一個狀態

//編輯角色
function editTr($this){
  thatTd=$($this).parent().prev(); value=$.trim(thatTd.html()); str='<input type="text" id="editing" value="'+value+'">'; thatTd.html(str); thatTd.find('input').focus(); } //編輯完成 $(document).on('blur','#editing',function(){ value=$(this).val(); $(this).parent().html(value); layer.msg('編輯用戶角色完成',{icon:1,time:1000}) })

第二種,整行都可編輯的實現

模板文件:lists數組為已經存在的列;js文件處理比較多,就不全部拆出來放了,只放一個編輯的處理,添加就是組合一個字符串append過來,刪除直接獲取ID之后ajax刪除就好。

 1 <tbody>
 2             <volist name="lists" id="v">
 3               <tr>
 4                   <td>{$v.id}</td>
 5                   <td>{$v.name}</td>
 6                   <td>{$v.sort}</td>
 7                   <td><if condition="$v['default'] eq 1">YES<else />NO</if></td>
 8                   <td class="actiontd"><span class="action edit">編輯</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="action del">刪除</span></td>
 9               </tr>
10             </volist>
11             <tr id="nowtr">
12               <td id="swid"></td>
13               <td><input id="swname" type="text" placeholder="請填寫軟件名稱" /></td>
14               <td><input id="swsort" type="text" class="small" placeholder="排序" /></td>
15               <td>
16                 <select id="swdefault">
17                   <option value="1">默認選中</option>
18                   <option value="0">默認不選</option>
19                 </select>
20               </td>
21               <td class=""><a class="btn btn-success" id="swadd">添加</a></td>
22             </tr>
23           </tbody>
 1   $('table').on('click','span.edit,span.MJedit',function(){
 2     var pre='';
 3     var tdlist=$(this).parent().parent().find('td');
 4     if($(this).attr('class')=='action MJedit'){
 5       pre='MJ';
 6     }
 7     $('#'+pre+'swid').html(tdlist.eq(0).html());
 8     $('#'+pre+'swname').val(tdlist.eq(1).html());
 9     $('#'+pre+'swsort').val(tdlist.eq(2).html());
10     defaultx=($.trim(tdlist.eq(3).html())=='YES')?1:0;
11     $('#'+pre+'swdefault').val(defaultx);
12     typename=tdlist.eq(4).html();
13     $("#MJtype option:contains('"+typename+"')").attr("selected",true);
14     $('#'+pre+'swadd').html('編輯');
15     layer.msg('請在下面編輯');
16   })//edit end

js文件on里選擇器有 span.edit,span.MJedit  是有兩處都會觸發編輯,之后通過attr('class')做稍微不同的處理,用pre變量區別。和此處關系不大,不用太在意。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM