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'; 
?>