Question

这是完全有效的jQuery / Ajax编辑MySQL表脚本。

如何使用“输入”字段（而非“a”）与其他GridEdit脚本一样？

如果有可能 - 仅在我点击它时才“输入”，否则为“span”（例如），当点击其他地方时 - 保存数据。

edit.php：

<?php
$connect = mysql_connect('localhost', 'username', 'password');
mysql_select_db('database');

if(isset($_GET['action'])) {
    $id = $_GET['id'];
    $field = $_GET['field'];
    $value = $_GET['value'];
    mysql_query("UPDATE posts SET $field='$value' WHERE id='$id' LIMIT 1");
}
?>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Editable</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
        function Editable() {
            $.ajax({
                url: 'edit.php',
                method: 'GET',
                data: {
                    action: 'update',
                    id: $(this).attr("db_id"), 
                    field: $(this).attr("db_field"), 
                    value: $(this).attr("value")
                },
                success: function() {
                    alert("Готово!");
                }
            });
            return false;
        }
        jQuery(document).ready(function() {
            $(".Update").click(Editable);
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>ID</td>
                <td>Title</td>
            </tr>
            <tr>
                <td>1</td>
                <td>test1 <a href="#" class="Update" db_id="1" db_field="title" value="test1">Update 1</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>test2 <a href="#" class="Update" db_id="2" db_field="title" value="test2">Update 2</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>test3 <a href="#" class="Update" db_id="3" db_field="title" value="test3">Update 3</a></td>
            </tr>
        </table>
    </body>
</html>

Answer 1

你可以尝试

$('a')
  .on('focus', function(){
      var $this = $(this);
      $this.html('INPUI TYPE HTML');
   })
  .on('blur', function(){
      // CALL AJAX TO UPDATE DB FIELD & RETURN BACK THE A TAG
  });

这只是逻辑，我没有在浏览器中测试它。

jQuery / Ajax / MySQL网格编辑脚本

1 个答案: