Question

我的网站上有一个HTML表格，我点击一个单元格，然后就可以编辑它了。我现在正尝试使用ajax将编辑后的值推回到我的数据库。我已经测试了点击工作正常，内容可以正常工作，并且ajax通过使用简单的＆＃34; hello＆＃34;发送到正确的URL。在updatedatabase.php上，看到它通过警报返回。当我尝试将数据从ajax拉到updateddatabase.php时，我遇到了问题。我相信也许$（this）.val（）可能不是我想要获得我刚刚编辑的单元格内容的内容吗？我说这个的原因是因为它看起来像一个空值正在传递到第二页。以下是我在主页上点击/内容editable / ajax的代码块：

    $('td').click(function(){

        var val=($(this).siblings().first().text());

        var col = $(this).parent().children().index($(this));

        $(this).prop('contenteditable', true);

        //var row = $(this).parent().parent().children().index($(this).parent());

        //alert('Date: ' + val + ', Column: ' + col);

        $(this).bind('input propertychange', function() {

            //On key stroke

            $.ajax({
              method: "POST",
              url: "updatedatabase.php",
              data: { content: $(this).val() }
            })
              .done(function( msg ) {
                alert( "Data Saved: " + msg );
            });

         });
    });

这就是我在updatedatabase.php上的内容。我保持简单只是为了测试现在传递的值。

<?php
    if(array_key_exists("content", $_POST)) {

        echo $_POST['content'];
    }

?>

希望这是一个简单的解决方案，因为我相信它可能只是与$（this）.val（），但我不确定我应该将它更改为什么？谢谢你的帮助!!

Answer 1

部分问题是您实际上没有捕获要编辑的表格单元格的值。在我的示例代码中使用新版本的jQuery，我已将bind()替换为keyup()，因为不需要进行任何委托：

$('td').click(function() {
   console.log('clicked');
   $(this).prop('contenteditable', true);

   $(this).keyup(function() { // get the new value as soon as the key is released

     console.log($(this).html());

   });
 });

https://jsfiddle.net/w9e0d5wm/

如@adeneo的评论中所述，表格单元格没有使用val()可以获得的值属性。在我的示例中，我使用了$(this).html()来获取更改后的<td>内的文字，但您也可以使用.text()。

您应该将data: { content: $(this).val() }更改为data: { content: $(this).html() }或data: { content: $(this).text() }，以便在您的AJAX中发送变量值。现在，如果您观看控制台，您会看到发布的内容和返回的内容。

Answer 2

尝试“委托”而不是“绑定”

通过ajax

2 个答案: