使用 Jquery/Bootstrap 删除标签标签/添加输入文本框

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