如何实现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页面中的其他值不变
求指教！求代码！展开

 我来答

8个回答

#热议# 应届生在签三方时要注意什么？

du瓶邪
2015-08-08 · TA获得超过2.4万个赞

知道大有可为答主

回答量：1.7万

采纳率：100%

帮助的人：2943万

我也去答题访问个人页

关注

展开全部

<!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.4万

我也去答题访问个人页

关注

展开全部

用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%

帮助的人：169万

我也去答题访问个人页

关注

展开全部

可以使用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.3万

我也去答题访问个人页

关注

展开全部

用AJAX，就可以实现，具体要看教程，这个在jsp上的那个button这调用方法，在JS里实现具体方法。不懂的话可以看下教程，http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp，但事实上这个很浅显，ajax有独立的一本教程。

已赞过 已踩过<

评论收起

更多回答（6）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：