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而不重定向页。更新过程应该在后台进行

修改

抱歉已经晚了edit.did对我的脚本进行了一些编辑。我已经发布了我的完整工作的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!')
                }
            });
        });
    }
});

Answer 2

使用$ .post简写方法。

查看http://api.jquery.com/jQuery.post/

Answer 3

看一下jQuery中的$ .ajax（）方法。在不触发页面刷新的情况下重新发布或发布内容非常简单。

http://api.jquery.com/jQuery.ajax/

更新表而不重定向页面

3 个答案: