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, """);
$(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, """);
$(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()”只占用一个表单的值。请帮忙。
答案 0 :(得分: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>
每个HTML表行对应的数据库行的id
在每个data-id
中都使用tr
指定。每个td
使用data-col
指定它对应的DB列。
使用这些信息,您可以将足够的信息传递回更新数据库的PHP脚本。因此,当单击单元格时,您可以使用以下命令获取其列名称:
$(this).data('col')
您可以使用以下方式获取其行的ID:
$(this).parent('tr').data('id')
然后您可以将这些传递给更新数据库的PHP页面。
您可以使用ul/li
代替table/tr/td
。如果您使用的是不支持HTML5样式class=car, class=make, etc.
属性的旧版jQuery,也可以使用data-col='car', data-col='make', etc.
代替data-
。
将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);
终于,总是尝试编写可读代码!请! :)
请参阅this live solution。它显示了如何获取列名和行ID。您只需采用它来处理PHP脚本。