僅使用一個函數來更新數據庫中表的不同列

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腳本一起使用。