javascript - 如何获取标签的post值

Question

我需要发布我的 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'];
}

脚本.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");
});
});

});

Answer 1

第一期:唯一 ID

您的 HTML 中不能有多个相同的 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>";

第二期:没有发布任何值(value)

您正在创建一个<input>在 <td> ，然后捕获 <td>的值，然后替换 <td> 的内容值为 <input> .

这里存在三个问题:

1. a <td>元素没有值 - 您应该使用 .text()抓取其内容而不是 .val() .

2. 当您抓取 <td> 的内容时，您执行此操作的顺序不正确。它包含一个 <input> ，但没有文字。

3. 一旦你替换了 <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 中应该是唯一的。