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

Question

id  car         make          sales
 1  panamera    porsche       100 
 2  italia      ferrari       200
 3  volante     astonmartin   300
 4  avantador   lamborghini   400
 5  slk         mercedes      500

伙计们，我的数据库中有这个简单的表。 我将在while循环中回显此表。

<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, """);
        $(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);   


    }

}
); 

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

Answer 1

修改您的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>

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

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

$(this).data('col')

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

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

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

编辑1：

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

编辑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, """); // 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脚本一起使用。