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

標籤：字串   amp   存在   com   可編輯   選擇   編輯框   contain   軟體   

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

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

//編輯角色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變數區別。和此處關係不大，不用太在意。

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