Javascript 如何跟踪提交给服务器的实时输入值？

我对前线还比较陌生

我设法使我的表格成为动态的，点击时变成文本区域，失去焦点时回到静态表格单元格

我想在这里做的是每次失去焦点时发送值。 Ajax确实如此，但当失去控制时，单击单元格中的值总是消失。它发生在任何细胞

这是我的密码

HTML

剧本

$("table").on("click", "[data-editable]", function(){
    var $el = $(this);
    var str = $el.text();
    console.log(str);
    var $input = $('<textarea rows=5 style="width:500px"/>').val( str );
    $el.html($input);
    $input.focus();
    var field_name = $el.attr('data-name');
    var save = function(bid, newWord, newDialogue, newPractice){
        var $td = $input.val();
        $.ajax({
            type : "POST",
            url : "/tight",
            data : JSON.stringify({
                bid : bid,
                word : newWord,
                dialogue : newDialogue,
                practice : newPractice
            }),
            dataType: "json",
            success : function(msg){
                if (msg["status"] == 'success'){
                    $input.replaceWith($td);
                } else {
                    alert("Fail");
                    $input.replaceWith($el);
                }
            },
            error : function(msg) {
                alert("ajax fail to get data from server");
            }
        });
    };
    $($input).blur(function(){
        var bid = $(this).closest('tr').find('td.bid').text();
        var newWord = $(this).closest('tr').find('td.word').text();
        var newDialogue = $(this).closest('tr').find('td.dialogue').text();
        var newPractice = $(this).closest('tr').find('td.practice').text();
        console.log(newPractice);
        save(bid, newWord, newDialogue, newPractice)
    })
});

我们不能在input和textarea上使用.text，在这种情况下，我们必须使用函数.val

我注意到您存储了字段名，但从未使用过它，因此在尝试获取处于编辑模式的字段值时，它会派上用场

下面是一个工作片段

$table.onclick[数据可编辑]，函数{ var$el=$this； 如果$el.findtextarea.length 回来 var str=$el.text； console.logstr； var$input=$.val str； $el.html$input； $input.focus； var field_name=$el.attr'data-name'； var save=functionbid、newWord、newDialogue、newPractice{ var$td=$input.val； $input。替换为$td； AlertSave bid:+bid+，newWord:+newWord+，newDialougue:+newDialogue+，newPractice:+newPractice； }; $$input.Blur函数{ var row=$this.最近的'tr'； var bid=row.find'td.bid'。文本； var newWord=field_name==word？row.findtd.word textarea.val:row.find'td.word'.text； var newDialogue=field_name==dialogue？row.findtd.dialogue textarea.val:row.find'td.dialogue'.text； var newPractice=field_name==practice？row.findtd.practice textarea.val:row.find'td.practice'.text； savebid，newWord，newDialogue，newPractice } }; 不 单词 对话 实践 100 单词1 对话1 做法1 200 单词2 对话2 做法2

---

嗨，谢谢，我一直在研究你的答案，但我发现这里也有同样的问题。当我在编辑模式下单击两次时，框中的数据将全部消失。哦，对了，我正在编辑代码段以执行额外的检查更新，方法是检查数据可编辑字段中是否已经存在textarea我想不到会检查textarea的长度。多简单的方法啊，谢谢。

$("table").on("click", "[data-editable]", function(){
    var $el = $(this);
    var str = $el.text();
    console.log(str);
    var $input = $('<textarea rows=5 style="width:500px"/>').val( str );
    $el.html($input);
    $input.focus();
    var field_name = $el.attr('data-name');
    var save = function(bid, newWord, newDialogue, newPractice){
        var $td = $input.val();
        $.ajax({
            type : "POST",
            url : "/tight",
            data : JSON.stringify({
                bid : bid,
                word : newWord,
                dialogue : newDialogue,
                practice : newPractice
            }),
            dataType: "json",
            success : function(msg){
                if (msg["status"] == 'success'){
                    $input.replaceWith($td);
                } else {
                    alert("Fail");
                    $input.replaceWith($el);
                }
            },
            error : function(msg) {
                alert("ajax fail to get data from server");
            }
        });
    };
    $($input).blur(function(){
        var bid = $(this).closest('tr').find('td.bid').text();
        var newWord = $(this).closest('tr').find('td.word').text();
        var newDialogue = $(this).closest('tr').find('td.dialogue').text();
        var newPractice = $(this).closest('tr').find('td.practice').text();
        console.log(newPractice);
        save(bid, newWord, newDialogue, newPractice)
    })
});