在不重定向页面的情况下更新表

Question

如何在不使用 javascript 或 jquery 重定向页面的情况下更新表 这是我的脚本

    function doubleclick(table,id1)
        {
            table.innerHTML="<input type=text name=tab onBlur=\"javascript:submitNewName(this,'"+id1+"');\" value=\""+table.innerHTML+"\">";
            table.firstChild.focus();

        }
        function submitNewName(text,id2)
        {
            text.parentNode.innerHTML=text.value;
        $.ajax({
            url: 'update',
            data:{text1:text.value,id:id2},
            type:"POST",
            dataType:"json",
            error:function(data)
            {
                alert('error')
            },
            success: function(data) 
            {
               // alert('updated!')
            }
        });  
        }

html

<td onDblclick="javascript:doubleclick(this,${item.id});">${item.filedesc}</td>

当我双击表格时，列中将出现一个编辑框，当文本框失去焦点时（通过单击表格外部）调用 onblur 事件，当它失去焦点时，应调用更新 servlet 而无需重定向页。更新过程应该在后台进行

编辑

抱歉编辑迟了。对我的脚本进行了一些编辑。我已经发布了我完整的工作 html 和 javascript 代码。一个月前解决了这个问题。用户请检查代码并建议是否可以进一步改进。

Answer 1

您可以使用 jquery 的 ajax 来实现这一点。您可以传递一个回调方法，以便在真正的更新完成时通知您。

这是一个表格单元格，可以是任何东西，我在这个例子中使用了 div：

<div id="table-cell" editing="0">Value</div>    

js应该是这样的

$('#table-cell').dblclick(function(){
    if ($(this).attr('editing') == '0')
    {
        // only trigger this when the cell is not in edit mode
        $(this).attr('editing',1);

        // show the input
        var input = $('<input type="text" value="'+$(this).html()+'">');
        $(this).html('');
        $(this).append(input);

        // bind blur event to input
        input.blur(function(){

            // update value from input to the table cell
            var value = $(this).val()
            $(this).parent().html(value);
            $(this).parent().attr('editing',0);

            // send the data to the server for update
            $.ajax({
                url: '/save_data/',
                data: {data:value},
                type:"POST",
                dataType:"json",
                error:function(data){alert('error')},
                success: function(data) {
                    alert('updated!')
                }
            });
        });
    }
});