如何实现jsp页面某个div的局部刷新

页面某个table中有两个div<divid=“table1”><table></table></div><divid=“table2”><table></table><... 页面某个table中有两个div
<div id=“table1”><table></table></div>
<div id=“table2”><table></table></div>
点击某个按钮时如何实现只刷新id="table1"的div,jsp页面中的其他值不变
求指教!求代码!
展开
 我来答
du瓶邪
2015-08-08 · TA获得超过2.4万个赞
知道大有可为答主
回答量:1.7万
采纳率:100%
帮助的人:2905万
展开全部
<!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>
十九个萨满
2013-09-03 · 超过32用户采纳过TA的回答
知道答主
回答量:99
采纳率:0%
帮助的人:77.1万
展开全部
用jquery 

<button id="bt" onclick="javascript:refreshTable()">



function refreshTable(){
   $("#table1").html("<div id=“table1”><table></table></div>"); 根据需要拼html
   
   //如果要访问后台,还可以加上 
   $.post('path',function(data){
     $("#table1").html("data");  //各种拼接
   });
}
追问
请简单介绍一下如何拼接html
能不能直接给我发一个完整的代码呢?谢谢
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
shixuegen
2013-09-03 · TA获得超过235个赞
知道小有建树答主
回答量:134
采纳率:100%
帮助的人:168万
展开全部
可以使用ajax实现。使用jquery这个js框架可以十分容易实现这个功能
function myrefer(){
var url="请求地址";
$.post(url,function(xml){
$("#table1").html(xml);
});
}
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-09-03
展开全部
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友bce6bc7
2013-09-03 · TA获得超过250个赞
知道答主
回答量:57
采纳率:0%
帮助的人:53.2万
展开全部
用AJAX,就可以实现,具体要看教程,这个在jsp上的那个button这调用方法,在JS里实现具体方法。不懂的话可以看下教程,http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp,但事实上这个很浅显,ajax有独立的一本教程。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(6)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式