1

我基本上是在尝试使用一种简单的方法来编辑存储在 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>

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

问题是我将如何去做，这甚至可能吗？

4

2 回答 2

5

如果您使用 jQuery，请查看就地编辑插件（jEditable是一个不错的插件）。

这背后的想法是在表格单元格上设置一个单击事件侦听器，您可以在其中附加一个带有 TD 内容的可编辑文本区域/表单。

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

于 2013-01-31T17:50:20.177 回答
3

是的，有可能。

它主要是前端。

这是单击单元格后创建输入的示例。(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 代码的值从单元格中删除元素/放置已编辑的值或弹出消息。

希望这可以帮助。

于 2013-01-31T18:28:19.177 回答