PHP/JQUERY标签输入while循环编辑按钮点击

Question

我使用php/jquery和html我的要求是当我点击编辑按钮，标签应该用输入文本替换，我将能够更新我的MySQL数据库，如果我点击取消按钮输入标记..

以下是我的代码：

<?php 
    $sql = 'select * from demo'; 
    while($row = mysql_fetch_object($sql)) { 
?> 
    <label style="display:block;">abc</label> 
    <input type="text" style="display:none;"/> 

    <button id="edit">edit</button> 
    <button id="cancel">cancel</button> 
<?php 
    } 
?> 

想如果我显示来自MySQL数据库的10条记录，每条记录的我应该能够编辑特别是点击行。

任何帮助表示赞赏谢谢！

Answer 1

我会将每个标签包装在父级中（例如p）。

点击一下，您将隐藏标签，并向父级添加一个输入和两个按钮。

通过单击取消按钮，标签将再次显示，其他元素将被删除。

“棘手”的部分是提交按钮。您需要一个处理您发布的数据的PHP页面。那么当它成功时，你应该回应一个ok。 $.post函数知道一个success参数。该功能将检查返回的值是否为ok，如果是，则更改标签中的文本，显示它并删除其他项目。

$(function() { 
 
    $('.edit').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var elem = $(this) , 
 
     label = elem.prev('label') , 
 
     parent = elem.parent() , 
 
     value = label.text() , 
 
     input = '<input type="text" value="'+value+'" />' , 
 
     save = '<button class="save">Save</button>' , 
 
     cancel = '<button class="cancel">Cancel</button>'; 
 
    parent.children().hide(); 
 
    parent.append(input+save+cancel); 
 
    }); 
 
    
 
    $(document).on('click', '.cancel', function(e) { 
 
    e.preventDefault(); 
 
    var elem = $(this) , 
 
     parent = elem.parent() , 
 
     label = parent.find('label'); 
 
    parent.children(':not(label,.edit)').remove(); 
 
    parent.children().show(); 
 
    }); 
 
    
 
    $(document).on('click', '.save', function(e) { 
 
    e.preventDefault(); 
 
    var elem = $(this) , 
 
     parent = elem.parent() , 
 
     label = parent.find('label') , 
 
     value = parent.find('input').val(); 
 
    parent.addClass('active'); 
 
    
 
    var data = '&name='+value; 
 
    $.post("processingPage.php", data) 
 
    .success(function(returnedData) { 
 
     if(returnedData == 'ok') { /* change this to check if the data was processed right */ 
 
     var active = $('.active'); 
 
     active.find('label').text(active.find('input').val()); 
 
     active.children(':not(label,.edit)').remove(); 
 
     active.children.show(); 
 
     } 
 
    }); 
 
    $('.active').removeClass('active'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><label>Some text</label><button class="edit">Edit</button></p> 
 
<p><label>Some text</label><button class="edit">Edit</button></p> 
 
<p><label>Some text</label><button class="edit">Edit</button></p> 
 
<p><label>Some text</label><button class="edit">Edit</button></p>

你的PHP是这样的：

<?php 
$return = false; 
if(isset($_POST['name'])) { 
    if(mysqli_query(...)) { 
     $return = true; 
    } 
} 
if($return) 
    echo 'ok'; 
else 
    echo 'not ok'; 
?>