怎么实现jsp页面的局部刷新？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>js添加删除行和双击变文本框-</title>
    <style type="text/css">
    *{
        font-size:12px;
    }
    #myTable{
        background:#D5D5D5;
        color:#333333;
    }

    #myTable tr{
        background:#F7F7F7;
    }
    #myTable tr th{
        height:20px;
        padding:5px;
    }
    #myTable tr td{
        padding:5px;
    }
    </style>
    <script type="text/javascript">
    function $(obj){
        return document.getElementById(obj);
    }

    var num = 0;
    function row(id){
        //构造函数
        this.id = $(id);
    }
    row.prototype = {
        //插入行
        insert:function(){
            num = num + 1;
            var newTr = this.id.insertRow(-1);
            var td_1 = newTr.insertCell(0);
            var td_2 = newTr.insertCell(1);
            var td_3 = newTr.insertCell(2);
            td_1.innerHTML = num;
            td_2.innerHTML = "脚本之家 www.jb51.net";
            td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >";
        },
        //删除行
        del:function(obj){
            var i = obj.parentNode.parentNode.rowIndex;
            this.id.deleteRow(i);
        }
    }

    function addRow(){
        var row2 = new row("myTable");
        row2.insert();
    }

    function delRow(obj){
        var row1 = new row("myTable");
        row1.del(obj);
    }

    var inputItem; // 输入框句柄
    var activeItem; // 保存正在编辑的单元格

    //转成文本
    function changeToText(obj){
        if( obj && inputItem ) {
            // 如果存在正在编辑的单元格，则取消编辑状态，并将编辑的数据保存起来
            var str = " ";
            if(inputItem.value != "")
                str = inputItem.value;
            obj.innerText = str;
        }
    }

    //转成编辑
    function changeToEdit(obj){
         if( !inputItem ) {
              inputItem = document.createElement('input');
              inputItem.type = 'text';
              inputItem.style.width = '100%';
         }
        // inputItem.style.display = '';
         inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上
         obj.innerHTML = ''; // 清空单元格的数据
         obj.appendChild(inputItem);
         inputItem.focus();
         activeItem = obj;
    }


    //双击时文本变成文本框
    document.ondblclick = function(){
        if(event.srcElement.tagName.toLowerCase() == "td"){
            if(!inputItem){
                inputItem = document.createElement("input");
                inputItem.type = "text";
                inputItem.style.width = "100%";
            }
            changeToText();
            changeToEdit(event.srcElement);
        }else{
            event.returnValue = false;
            return false;
        }
    }

    //单击时文本框变成文本
    document.onclick = function(){
        if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem)
            return;
        else
            changeToText(activeItem);
    }
    </script>
</head>
<body>
<input type="button" onclick="addRow()" value="插入一行" />
<table id="myTable" border="0" cellpadding="0" cellspacing="1">
<tr><th>编号</th><th>姓名</th><th>操作</th></tr>
</table>
</body>
</html>

如果项目没有用到jquery 就用ajax实现局部刷新。要不直接写js.

这个哪有那么复杂，不用ajax也可以的吧，普通的javascript就可以实现。你上网搜dom操作表格就有例子的。
<table width="300" border="1">
    <tr>
        <td>添加一行
        </td>
        <td>2
        </td>
        <td>3
        </td>
        <td><a href="#" onclick="deleteCurRow(event)">delete current row</a>
        </td>
    </tr>
    <tr>
        <td>11
        </td>
        <td>22
        </td>
        <td>33
        </td>
        <td><a href="#" onclick="deleteCurRow(event)">delete current row</a>
        </td>
    </tr>
    <tr>
        <td>111
        </td>
        <td>222
        </td>
        <td>333
        </td>
        <td><a href="#" onclick="deleteCurRow(event)">delete current row</a>
        </td>
    </tr>
    <tr>
        <td>1111
        </td>
        <td>2222
        </td>
        <td>3333
        </td>
        <td><a href="#" onclick="deleteCurRow(event)">delete current row</a>
        </td>
    </tr>
</table>
<script>function deleteCurRow(event){
    var r;
    if(document.all){
        r = event.srcElement.parentNode.parentNode;// 行
    }else{
        r = event.target.parentNode.parentNode;
    }

    r.parentNode.deleteRow(r.rowIndex);
}function insRow()
{
var j = 1;
var obj=document.getElementById('myTable').insertRow();
obj.insertCell().innerHTML = "<font color=red>第"+i+"行第1列</font>";
obj.insertCell().innerHTML = "<font color=red>第"+i+"行第2列</font>";
obj.insertCell().innerHTML = "<font color=red>第"+i+"行第3列</font>";
i++;
}
</script>
拷下了试试。

这完全就是在客户端用JS就能完成的东西。
并不是什么AJAX ；
参考1楼提的 DHTML ，这是开发必备手册。

可以先jsp页面上把这部分表单的html内容隐藏，等到点击确定后再显示，这根本就可以不用什么异步就可以了，只需要页面加点逻辑控制就好

你可以把你要做的表格写在DIV里然后display="none" DIV里面写2个BUTTON 一个确定一个取消，确定的时候触发一个JS 用的时候在JS里加出来，$('#id').append("<tr><td></td></tr>");,最好在这层里面加一个按钮，点击的时候写一个ajax 存数据库里，然后把这个按钮隐藏。不知道能不能帮助你。，楼主加油哦

其实很简单，提示完成之后使用js对表格进行操作(DOM)，如果需要后台数据更新时应用ajax向后台发送一个异步请求，处理相关数据就可以了。

我给你贴一段jquery局部刷新，删除表格中内容的例子。你参考一下//ajax動態刪除档案
    function deleteFile(fileNo){
        if(confirm('确定刪除？')){
            //ajax刪除文件
                $.get("<%=request.getContextPath()%>/<%=PFMConstants.PFM_MODULE_FILE_UPLOAD_INFO%>/deleteFile.htm",//URL
                        {fileNo:fileNo},//傳入的參數
                        function(data, textStatus){//回調方法
                        var fileLists = JSON.parse(data);
                        //先移除之前的信息，再加载
                        $("#tab1 tbody").find('tr:not(:first)').remove();
                        var html = "";
                        $.each(fileLists,function(index,comm){
                             html+="<tr class='table-odd-row'>"
                                 +"<td class='table-other-column'><a href='javascript:void(0)' onclick='return deleteFile("+fileLists[index].fileNo+");'><img src='${ctx}/images/u78.png' width='16' height='16' border='0' alt='刪除'></a></td>"
                                 +"<td class='table-string-column'><a href='<%=request.getContextPath()%>/<%=PFMConstants.PFM_MODULE_FILE_UPLOAD_INFO%>/downloadFile.htm?wh=temp&fileName="+fileLists[index].aliasFileName+"&srcFileName="+fileLists[index].fileName+"' onclick='return checkFileExist(\""+fileLists[index].aliasFileName+"\");'>"+fileLists[index].fileName+"</a></td>"
                                 +"<td class='table-string-column'>"+fileLists[index].strUploadDate+"</td>"
                                 +"<td class='table-string-column'>"+fileLists[index].uploadUser+"</td>"
                                 +"<td class='table-num-column'>"+fileLists[index].fileSize+"</td>"
                                 +"<td class='table-string-column'>"+fileLists[index].comments+"</td>"
                                 +"</tr>";
                        });
                        $("#tab1 tbody").html(html);
                });
                return false;
                }
            }

提交表单的话用form的target属性自己百度吧
不提交表单用jquery ajax 举个例子吧 http://www.2cto.com/kf/201204/127143.html
解决我所见到的所有局部刷新问题

建议你不要用局部刷新我之前用过惨痛的教训来的你这个需求其实很简单弹出框添加完还是访问后台方法还是返回列表的整个页面这样一样能实现因为你的list是动态的你弹出框如果添加成功你刷新当前整个页面 list一样会多出来记录的你用ajax那种你的浏览器url不会变你再刷新那个新多出来的记录就没了的

这不需要刷新,只需要增加一行<td>就行了,另js添加的表格数据是需要做绑定处理的,否则提交数据时是无法获得新增数据的

json和可以完美实现。没有基础的可以去学习一下

用ajax将数据传到后台保存
页面用js操作增加table的行
无刷新,并且保存了数据

DHTML，ajax，jquery都可以实现异步刷新

前台也面的内容，还是建议用js，ajax来解决

用js可以实现，
function js(){
var str = "<h1>增加一行<h1>";
$("#id").append();
}

<HTML>
<HEAD>
<TITLE>提交后按钮变灰色，点击提交按钮后不可再次点击</TITLE>
<script>
   function goo(obj)
   {
     obj.disabled =true;
     document.getElementById("form").submit();
   }
</script>
</HEAD>
<BODY>把按键变成灰色，不可再次点击
<form method="post" action="http://www.baidu.com" onSubmit="return CheckLinkForm();" name="form" target="_blank">
    <input type="button" value="提交" onClick="goo(this);">
</form>
</BODY>
</HTML>

var table = document.getElementById("table_ID");
table.appendChild(table.tBodies[0].rows[0].cloneNode(true));

ajax主要是实现数据与后台的交互，并没有什么不对，总不可能实现表格中增加一条记录而后台数据库不变吧，还是看楼主要实现什么

我的处理方式是用jQuery。不过我用dwr的，直接将添加的数据添加到数据库并返回json格式，至于如何显示在界面上，ajax应该能实现。我没尝试过。应该可行。

这个可以说很简单，给你一个例子你看看。http://download.csdn.net/download/xmt1139057136/7066997

http://download.csdn.net/download/xmt1139057136/7066997
很好的做法。

调试易

怎么实现jsp页面的局部刷新？

解决方案 »