Question

我基本上试图使用一种简单的方法来编辑存储在mySQL数据库中的表，但是不想通过不同的编辑页面，所以我的理论是：

像往常一样显示HTML表格中的所有数据。

<table class="table table-bordered sortable">
<thead>
        <tr>
                <th>Marchant</th>
                <th>URL</th>
                <th>Status</th>
                <th>Sold</th>
                <th>Deals</th>
                <th>Sites</th>
                <th>Found</th>
                <th>Seen</th>
        </tr>
</thead>

<tbody>
        <tr>
                <td>value</td>
                <td></td>
                <td></td>
                <td>Sold here</td>
                <td>Deals here</td>
                <td>Sites here</td>
                <td>null</td>
                <td>null</td>
        </tr>
</tbody>

我希望能够动态编辑数据，只需单击显示的值并进行更改即可。

问题是如何通过这样做来实现，甚至可能吗？

Answer 1

如果您正在使用jQuery，请查看edit-in-place plugins（jEditable是一个不错的选项）。

这背后的想法是在表格单元格上设置一个click事件监听器，在其中附加一个带有TD内容的可编辑textarea /表单。

在更改或提交时，数据通过ajax请求发送到服务器，服务器更新数据库并最终返回已清理的数据（用它更新TD内容）。

Answer 2

是的，它可能。

这主要是前端。

以下是单击单元格后创建输入的示例。（jQuery的）

// once page is loaded
$(document).ready(function() {

    // adding an event when the user clicks on <td>
    $('td').click(function() {

        // create input for editing
        var editarea = document.createElement('input');
        editarea.setAttribute('type', 'text');

        // put current value in it
        editarea.setAttribute('value', $(this).html());

        // rewrite current value with edit area
        $(this).html(editarea);

        // set focus to newly created input
        $(editarea).focus();

    });

});

在此之后，您可以将事件添加到新创建的输入中。（例如，当用户点击Enter时）

然后您执行AJAX请求并将新值发送到 .php 脚本。

您还需要将 id 添加到新创建的元素中，以便确切知道在通过AJAX发送数据后需要更改哪个单元格。

另外，在放入MySQL之前不要忘记验证数据。

因此，如果一切顺利，您将返回值，并根据您编写JavaScript代码的值来从单元格/ put编辑的值中删除元素或弹出消息。

希望这有帮助。

更改行值onclick html表，如phpMyAdmin

2 个答案: