删除标签标签/添加输入textBox中使用jQuery /引导

Question

我与名URL和ID（PK），我使用PHP数据库中的列/ MYSQL

林显示值从DB现在我想执行编辑（更新）操作使用Jquery/Ajax。

当我点击编辑链接它会被替换更新/取消这是工作的罚款链接和即时通讯能够执行更新操作。

我的要求是，当我在使用拉布勒标签应与输入文本框代替其即时编辑URL数据点击我应该执行更新操作
HTML代码

<div class='col-md-4'> 
    <label class="feed_label" id="feed_label" idl='<?php echo $row->id;?>'><?php echo $row->url; ?></label> 

    <input name="url1" class="form-control url1 feed_text" value="<?php echo $row->id;?>" id="url1" type="text" placeholder="enter url" style="display:none;"> 
</div> 
<div class='col-md-2'> 
    <a ide='<?php echo $row->id;?>' id="edit" class='edit' href="#" style="display:block-inline;">EDIT</a> 

    <a idu='<?php echo $row->id;?>' id="update" class='update btn btn-primary btn-sm' href='#' style='display:none;'>UPDATE</a> 

    <a idd='<?php echo $row->id;?>' id="delete" class='delete' href="#" style="display:block-inline;">DELETE</a> 

    <a idc='<?php echo $row->id;?>' id="cancel" class='cancel btn btn-warning btn-sm' href='#' style='display:none;'>CANCEL</a> 

</div> 

jQuery代码

JQUERY CODE 
//EDIT,DELETE TO UPDATE,CANCEL 
$('body').delegate('#edit','click',function(){ 
    //alert(); 
    $(this).siblings('#delete').hide(); 
    $(this).siblings('#update,#cancel').show(); 
    $(this).hide(); 
    $('#feed_label').removeClass('feed_label').addClass('feed_url'); 
}); 
$('body').delegate('#cancel','click',function(){ 
    //alert(); 
    $(this).siblings('#edit,#delete').show(); 
    $(this).siblings('#update').hide(); 
    $(this).hide(); 
    $("#update_url")[0].reset(); 
}); 
//ENDS 


//Edit Code 
    $('body').delegate('.edit','click',function(){ 
      var IdEdit = $(this).attr('ide'); 
      //alert(IdEdit); 
      //return false; 
      $.ajax({ 
       url:"pages/feeds.php", 
       type:"post", 
       datatype:"json", 
       data:{ 
        editvalue:1, 
        id:IdEdit 
       }, 
       success:function(show) 
       { 
        //alert('success'); 
        $('#id').val(show.id); 
        $('#url1').val(show.url); 
        //$('#add_feed_form')[0].reset(); 
        //$('#showdata').load('pages/feeds.php'); 
       } 
      }); 
    }); 
    //Ends 

    //Update Starts 
    $('.update').click(function(){ 
     //alert('update'); 
     var id = $('#id').val()-0; 
     var urls = $('#url1').val(); 
     $.ajax({ 
      //alert(); 
      url:"pages/feeds.php", 
      type:"post", 
      async:false, 
      data:{ 
       update:1, 
       id:id, 
       upurls:urls 
      }, 
      success:function(up) 
      { 
       //alert('updated'); 
       $('input[type=text]').val(''); 
       showdata(); 
       $('#add_feed_form')[0].reset(); 
       $('#showdata').load('pages/feeds.php'); 
      } 

     }); 
    }); 
    //UPdate Ends 

PHP代码

//Edit Starts 
    if(isset($_POST['editvalue'])) 
    { 
     $sql = "select * from deccan where id='{$_POST['id']}'"; 
     $row = mysql_query($sql); 
     $rows = mysql_fetch_object($row); 

     header("Content-type:text/x-json"); 
     echo json_encode($rows); 
     exit(); 
    } 
//Ends 

//UPdate Starts 
    if(isset($_POST['update'])) 
    { 
     $sql = " 
      update deccan 
      set 
       url='{$_POST['upurls']}' 
      where id='{$_POST['id']}' 
     "; 
     $result = mysql_query($sql); 
     if($result) 
     { 
      //alert('success'); 
      echo 'updated successfully'; 
     } 
     else 
     { 
      //alert('failed'); 
      echo 'failed to update'; 
     } 
    } 
//Ends 

任何帮助表示赞赏谢谢！

Answer 1

这里我给样品为您的情况：

HTML

<div class="container"> 
    <label>John</label> 
    <input type="button" class="edit" value="Edit"/> 
    <input type="button" class="delete" value="delete"/> 
</div> 
<hr/> 
<div class="container"> 
    <label>John Who</label> 
    <input type="button" class="edit" value="Edit"/> 
    <input type="button" class="delete" value="delete"/> 
</div> 

JS（可以简化下面的代码到一个处理器）

$(document).on('click', '.edit', function(e){ 
    var data = $(this).prev(); 
    if (data.is('label')) data.replaceWith('<input value="'+data.text()+'">');  
}); 

$(document).on('click', '.delete', function(e){ 
    var data = $(this).prev().prev(); 
    if (data.is('input')) data.replaceWith('<label>'+data.val()+'</label>'); 
}); 

DEMO