我需要将这些td标签的值发布为使用jquery的可编辑表格。我不确定这里的问题是脚本还是td标签?目前,我的var_dump($ _ POST)未返回任何值。
参见下面的代码,td标签大约向下10行:
<h2><u>Edit</u></h2>
<form action="ajax/name.php" name="edit_template_form" id="edit_template_form" method="post">
<?php print "<table border=\"1\" class=\"editableTable\">
<tr>
<th>Template Name</th>
<th>Template Description</th>
</tr>";
foreach($res as $row){
$temp_description = $row['template_description'];
echo "<tr>";
echo "<td id=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td id=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
echo "<tr/>";
}
print "</table>"; ?>
</form>
<div id="template_edit"></div>
名称.php
var_dump($_POST);
if (isset($_POST['edit_template'])) {
$template_edit = $db->escape($_POST['edit_template']);
$user = $db->escape($user);
$db->update('templates', array('template_description' => $template_edit), 'AND userID="'.$user.'"');
echo $_POST['edit_template'];
}
if (isset($_POST['edit_name'])) {
$template_name = $db->escape($_POST['edit_name']);
$user = $db->escape($user);
$db->update('templates', array('template_name' => $template_name), 'AND userID="'.$user.'"');
echo $_POST['edit_name'];
}
script.js
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
//POST values
var edit_template = $('#edit_template').val();
var edit_name = $('#edit_name').val();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('div#template_edit').text(data);
});
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
最佳答案
第一期:唯一ID
HTML中不能有多个具有相同ID的ID-这是无效的代码,并且会在代码中提供不一致和/或不正确的结果。
要解决此问题,请将<td>
元素上的id更改为类:
echo "<td class=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td class=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
第二期:无价值发布
您要在
<input>
中创建一个<td>
,然后获取<td>
的值,然后将<td>
的内容替换为<input>
的值。这里有三个问题:
<td>
元素没有值-您应该使用.text()
而不是.val()
来获取其内容。您正在无序地执行此操作-在获取
<td>
的内容时,该内容包含<input>
,但没有文本。一旦替换了
<td>
的内容,this
在keydown事件处理程序(<input>
)中引用的元素就不再与DOM有任何关系,因此您必须存储对另一个元素的引用(例如。父元素)执行DOM操作。因此,在script.js中进行以下更改:
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
var $parent = $(this).parent();
$parent.text(newContent);
$parent.removeClass("cellEditing");
//POST values
var edit_template = $parent.closest("tr").find(".edit_template").text();
var edit_name = $parent.closest("tr").find(".edit_name").text();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('#template_edit').text(data);
});
}
});
注意,我还从
div
回调的选择器中删除了$.post
-#id
,因为在jQuery中选择器比element#id
更快,并且id在DOM中应该是唯一的。