[mysql]PHP/JQUERY 标签输入在 while 循环上单击编辑按钮

标签: jQuery MySQL PHP HTML
发布时间: 2017/4/9 23:34:24
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我使用 php/jquery 和我的要求是当我点击编辑按钮、 标签应该替换输入文本和会能在我的 mysql 数据库中更新,如果我点击取消按钮输入到标签的 html。

以下是我的代码︰

<?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 
    }
?>

假设如果我显示 10 条记录从 mysql 数据库,为每条记录,我应该能够编辑上特别是点击行。

任何帮助是欣赏的谢谢 !

解决方法 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';
?>
赞助商