我需要将这些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中应该是唯一的。

10-05 21:07
查看更多