仅使用一个函数更新数据库中表的不同列

Using only one function to update different columns of a table in database

本文关键字：数据库 更新 函数 一个      更新时间：2023-09-26
id  car         make          sales
 1  panamera    porsche       100 
 2  italia      ferrari       200
 3  volante     astonmartin   300
 4  avantador   lamborghini   400
 5  slk         mercedes      500

伙计们，我的数据库中有这个简单的表格。我将在一段时间循环中呼应这张表。

<ul>
<?php  
$query = "SELECT * FROM inplace LIMIT 0, 6";    
$result = mysql_query($query) or die ('Query couldn''t be executed');  
while ($row = mysql_fetch_assoc($result)) {
echo '<li class="editable" id="'.$row['id'].'">'.$row['car'].'</li>';
echo '<li class="editable2" id="'.$row['id'].'">'.$row['make'].'</li>'; 
}
?>
</ul>

这个想法是使用 jQuery 就地编辑器更新此表。所以这是代码-

$(document).ready(function() 
{
$(".editable").bind("dblclick", replaceHTML);
$(".editable2").bind("dblclick", replaceHTML2);
$(".btnSave, .btnDiscard").live("click", handler);
function handler()
    {
        if ($(this).hasClass("btnSave"))
            {
                var str = $(this).siblings("form").serialize();
                $.ajax({
                        type: "POST",
                        async: false,
                        url: "handler.php",
                        data: str,
                }); 
            }
    } 
function replaceHTML()
    {
        var buff = $(this).html()
        .replace(/"/g, "&quot;");
        $(this).addClass("noPad")
                .html("<form><input type='"text'" name='"car'" value='"" + buff + "'" /> <input type='"text'" name='"buffer'" value='"" + buff + "'" /><input type='"text'" name='"id'" value='"" + $(this).attr("id") + "'" /></form><a href='"#'" class='"btnSave'">Save changes</a> <a href='"#'" class='"btnDiscard'">Discard changes</a>")
                .unbind('dblclick', replaceHTML);   

    }
    function replaceHTML2()
    {
        var buff = $(this).html()
        .replace(/"/g, "&quot;");
        $(this).addClass("noPad")
                .html("<form><input type='"text'" name='"make'" value='"" + buff + "'" /> <input type='"text'" name='"buffer'" value='"" + buff + "'" /><input type='"text'" name='"id'" value='"" + $(this).attr("id") + "'" /></form><a href='"#'" class='"btnSave'">Save changes</a> <a href='"#'" class='"btnDiscard'">Discard changes</a>")
                .unbind('dblclick', replaceHTML);   

    }
}
);

这是我从互联网上获得的就地编辑代码，我只是为了理解代码而将其撕成基本级别。不要担心更新查询，它在"处理程序.php"中。这里的问题是，我必须为每列编写单独的函数。在这种情况下，我必须编写一个单独的函数来更新"汽车"列，单独的函数来更新"make"列并继续。我认为这不是正确的方法。因为，这里我只有 3 列。如果我有 10 到 15 列怎么办？我不认为编写 15 个函数是正确的方法。而"$(this(.html(("只取一个形式的值。请帮忙。

修改你的 PHP 脚本以生成类似于以下内容的 HTML：

<table>
<tbody>
    <tr data-id="1">
        <td data-col="car">panamera</td>
        <td data-col="make">porsche</td>
        <td data-col="sales">100</td>
    </tr>
</tbody>
</tbody>

与每个 HTML 表行对应的数据库行的id在每个tr中都用 data-id 指定。每个td都使用 data-col 指定它对应于哪个数据库列。

使用这些信息，您可以将足够的信息传递回更新数据库的 PHP 脚本。因此，基本上，当单击单元格时，您可以使用以下命令获取其列名：

$(this).data('col')

您可以使用以下命令获取其行的 ID：

$(this).parent('tr').data('id')

然后，您可以将这些传递给更新数据库的 PHP 页面。

编辑 1：

您可以使用ul/li而不是table/tr/td。如果您使用的是不支持 HTML5 样式data-属性的旧版本的 jQuery，也可以使用 class=car, class=make, etc. 而不是 data-col='car', data-col='make', etc.。

编辑2：完整解决方案

将while循环更改为：

while ($row = mysql_fetch_assoc($result)) {
    echo '<li class="editable" data-id="'.$row['id'].'" data-col="car">'.$row['car'].'</li>';
    echo '<li class="editable" data-id="'.$row['id'].'" data-col="make">'.$row['make'].'</li>'; 
}

如您所见，我们将数据库行 ID 存储在 data-id 中，将数据库列名称存储在 data-col 中。

现在，使用此设置，您只需要一个处理程序：

function replaceHTML()
{
    var rowId   = $(this).data('id');
    var colName = $(this).data('col');
    var buff = $(this).html().replace(/"/g, "&quot;"); // Are you sure you need this?
    $(this).addClass("noPad")
            .html("<form><input type='"text'" name='"" + colName + "'" value='"" + buff + "'" /> <input type='"text'" name='"buffer'" value='"" + buff + "'" /><input type='"text'" name='"id'" value='"" + rowId + "'" /></form><a href='"#'" class='"btnSave'">Save changes</a> <a href='"#'" class='"btnDiscard'">Discard changes</a>")
            .unbind('dblclick', replaceHTML);   
}
$(".editable").bind("dblclick", replaceHTML);

最后，始终尝试编写可读的代码！请！:)

编辑3：JSFiddle

请参阅此实时解决方案。它演示如何获取列名和行 ID。你只需要采用它来使用你的PHP脚本。

相关文章：