如何实现jsp页面某个div的局部刷新
页面某个table中有两个div
<div id=“table1”><table></table></div>
<div id=“table2”><table></table></div>
点击某个按钮时如何实现只刷新id="table1"的div，jsp页面中的其他值不变
求指教！求代码！
<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>
<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
能不能直接给我发一个完整的代码呢？谢谢
本回答被提问者采纳function myrefer(){
var url="请求地址";
$.post(url,function(xml){
$("#table1").html(xml);
});
}本回答被网友采纳
<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页面局部刷新问题
1、假设左边tree的html结构：<ul id="tree"> <li><a href="javascript:void(0)" link="format.html">课表查询<\/a><\/li> <li><a href="javascript:void(0)" link="1.html">信息修改<\/a><\/li> <\/ul> \/\/注意以上a元素的link属性代表中间将要显示的页面的名称,根据需要自行修改 2、引...
在JSP页面中实现页面局部刷新(刷新的内容是实时数据库里的实时数据)这...
实现无页面局部刷新只能使用ajax技术，也很简单。。如果不使用ajax的框架，在页面里边写两个function就OK了。如果用dwr框架，配制配制就行，（当然也要写代码）
ajax,jquery,$.post\/$.get异步刷新div,局部刷新页面
success:function(data){\/\/后台处理数据成功后的回调函数 \/\/ 在这里执行对页面的数据刷新 ("div .a").html(data);} data：就是这次请求返回的a.jsp页面 ("div .a")：就是页面上那个<div id='a' class='a'><\/div> ("div .a").html(data)：就就是将a.jsp 页面放入到 class=a 的...
jsp table的局部刷新
实现局部刷新其实非常简单，看你需要哪种局部，单行、多行、单列、多列，而无需考虑。单行和单列只需要给tr或者td标签添加id，通过id获取对象更新text属性即可，多行有四种种方式：给要更新的这些行添加相同的name，通过name批量给这些行删除td并重新添加td，更改新数据 将要更新的行用div或分块的标签...
如何实现网页局部刷新
我查看http:\/\/localhost\/BehaviorService\/test1.htm就可以看到一个服务器上的时间了 而且是会动的，通过这种方法就可以实现页面的局部刷新了 有两点限制：1.行为只能用域内的web服务，因为DHTML内置的安全限制造成的 2.通过的这种方式的访问的类型会被限制，行为支持.net的基本类型和它们的数组 如：...
jsp include的页面局部刷新问题。
好像不行，无论你用<jsp:include>还是<%@include file%>都是html层面上的融合，这样融合之后，就是整个的html页面，无法做到页面局部刷新，除非你用ajax。你提到的这种需求可能用<iframe>比较合适。
jsp局部跳转(就这点分,全给你们了...在线等)
用<jsp:include="">就不对了，上面不刷新，下面的页面在变化在实际应用中大部分都是用到html框架，html的框架很简单。就是把页面分为上，左和下。你可以随便找本书看看。
jsp页面有一个选项卡,内有不同的查询。。。要求页面不刷新,是不是只能...
用jquery举例：我先传入一个groupId，然后传到db里根据groupId查询我要的信息 .ajax({ type : 'GET',url : WS_BASE_ADDRESS + '\/policies\/'+groupId+'\/selected',success : function(msg) {\/msg就返回了你所查询的结果，是xml形式 (msg).find("policiesInfo").each(function(){ \/\/在这里...
局部刷新的函数 $(function(){ $(".list div").click(f...
path你本来就没定义埃 var path = "\/oper\/"; 只是举个例子。关键是要看path+"\/"+$(this)[0].id+".jsp"这段代码。path应该就是要请求的文件路径。$(this)[0].id应该就是文件名。这个具体估计应该是：\/oper\/post.jsp 我只是举个例子，打个比方，你网站的具体文件路径，你自己去看 ...
局部刷新的函数 $(function(){ $(".list div").click(function(){ $...
path你本来就没定义啊。var path = "\/oper\/"; 只是举个例子。关键是要看path+"\/"+$(this)[0].id+".jsp"这段代码。path应该就是要请求的文件路径。$(this)[0].id应该就是文件名。这个具体估计应该是：\/oper\/post.jsp 我只是举个例子，打个比方，你网站的具体文件路径，你自己去看 ...
