如何让表格中动态增加的行,能在链接到其它页面,后退后,仍然能保持新增加的行?

风斧 2004-11-06 10:22:33
试验了一个table3.htm,能够增加表格的行,table3上的链接到table2也好使,但从table2回到table3时,原来table3中新增的行没有了?
怎么回事?

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
iIndex = 0;
function showIndex(){
alert(iIndex);
}

function getIndex(){
iIndex = event.srcElement.parentElement.rowIndex;
}
function insertRow(iPos){
var otr=myTable.insertRow(iPos);
var ocell=otr.insertCell(0);
ocell.innerText=""
var ocell=otr.insertCell(1);
ocell.innerText=""
}
function deleteRow(iPos){
document.all.myTable.deleteRow(iPos);
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(iIndex)" value="插入行">
<input type=button onclick="deleteRow(iIndex)" value="删除行">
<input type=button onclick="history.go(-1);" value="返回">
</form>
</BODY>
</HTML>
...全文
211 17 打赏 收藏 举报
写回复
17 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
Tribesoft 2005-03-22
  • 打赏
  • 举报
回复
JK_10000(JK)不错,这也是我想要的。
kkgolf 2004-11-08
  • 打赏
  • 举报
回复
关注中。。。
JK_10000 2004-11-08
  • 打赏
  • 举报
回复
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>

<style>
TD,INPUT{ font-size:12; }
</style>
</head>

<body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>JK的动态明细示例</h4>

<table align="center" bordercolor=cccccc border=1 width=100% >
<tr>
<td width=500>
</td>
<td align=right>
<input type="button" value="增加" class="bottom" onclick="addDetailProcess();"> 
<input type="button" value="删除" class="bottom" onclick="delDetailProcess();"> 
<input type="button" value="完成" class="bottom" onclick="submitProcess();">

</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
<tbody id="tbDetailPrepare">
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
</tbody>
<tr bgcolor=eeeeee id="trDetailTitles">
<td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
<td >明细ID*</td>
<td >明细NAME</td>
</tr>
<tbody id="tbDetailUsed" >
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>

<tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
</tbody>

</table>
</div>
</form>

<input name="theHistoryRecord" type=hidden value="">
</body>

</html>

<script language=javascript>

window.onload = historyOncemore;
window.onbeforeunload = fixHistory;

function fixHistory() //记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
}

function historyOncemore() //恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
}

function selectallcheckbox(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbDetailUsed.rows;
for(var i=0;i<theDetail.length-1;i++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}


function addDetailProcess(afterRowIndex) //增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
var theFirstSelectedDetail;
if (afterRowIndex==null)
{
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true) {theFirstSelectedDetail=i;break;}
}
if (theFirstSelectedDetail==null) {theFirstSelectedDetail=alltbDetailUsed.length-2;}
}
else theFirstSelectedDetail=afterRowIndex;
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
desRow.parentElement.insertBefore(newRow,desRow );

}

function delDetailProcess() //删除明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true)
{
document.all("tbDetailUsed").deleteRow(i);
i=i-1;
}
}
}

function submitProcess()
{
document.frm.submit();
}


</script>
风斧 2004-11-08
  • 打赏
  • 举报
回复
I see, thanks。
JK_10000 2004-11-08
  • 打赏
  • 举报
回复
页面history记录里保存了那值。页面加载时再将该值加载上的。

而onload,onblur等是window对象的event,而不是body对相的event,
可以在html的参考资料上看到关于body对象的一段注释:
The window object for the BODY element can host event handlers for the onblur, onfocus, onload, or onunload events.
但是onbeforeunload似乎就不能在body里帮window定义了(没试过,但应该是这样的)。
风斧 2004-11-08
  • 打赏
  • 举报
回复
楼上大虾,我给你开了一个铁子,请光临。
http://community.csdn.net/Expert/topic/3532/3532874.xml?temp=.2830469
眼前的问题是:那个隐藏的对象怎么unload后,还能保存值呢?
另外,我如果把window.load换成body.load就不行了,这是怎么回事?
JK_10000 2004-11-08
  • 打赏
  • 举报
回复
自己的理会是这样的,不知对或不对。

浏览器先解释html(也执行没有defer的script)
之后从计算机内存中取出以下的值赋上:
text-input________value
hidden-input______value
radio-input_______checked
checkbox-input____checked
select____________selectedIndex
option____________selected
textarea__________value(innerText)
之后再执行onload的事件

页面unload时情况恰相反
先将以上值放在内存中(同记录页面history一起)
再进行unload
风斧 2004-11-08
  • 打赏
  • 举报
回复
window.onload和body的onload有什么区别,
我已经另外开了帖子表示对JK_10000(JK) 的感谢,本贴主要用来对其他参与大虾的感谢。
请指点。
风斧 2004-11-08
  • 打赏
  • 举报
回复
刚刚把JK的代码略看了一遍,中心思想是这样的:网页unload之前把表格的innerText保存到某个隐藏对象中去,在网页load时,判断该隐藏对象的值,如果非空,改变表格的innerText。
这里有一事不明,网页在unload后,怎么那个对象的值还能保存呢?这里的机制是怎样的?
是不是有个缓冲(存)机制?或者整个网页对象并没有被destroy掉,那么unlaod到底做了什么呢?
风斧 2004-11-08
  • 打赏
  • 举报
回复
^_^,带星的大虾高啊。钦佩※感谢。
风斧 2004-11-07
  • 打赏
  • 举报
回复
其实,如何用动态网页技术实现我要的效果,我是会的。看来浏览器go(-1)之类的语句都会导致浏览器重新装载病解释htm文件,不用动态网页技术,看来是不行的了。
梅雪香 2004-11-07
  • 打赏
  • 举报
回复
把改动放到session里
把改动传到数据库
把改动写到文件
startfire 2004-11-07
  • 打赏
  • 举报
回复
我有一个麻烦一点的办法,你可以把TABLE的必要属性放在cookie里,或者考究一点做一个顶层frame,里面放一 些hidden元素来存放属性,然后在网页的onload事件里取到表格属性后动态重制。
wslfriend 2004-11-07
  • 打赏
  • 举报
回复
扩展名是HTM的文件,似乎作不到这样的效果。
风斧 2004-11-07
  • 打赏
  • 举报
回复
eglic(圪圪) 大虾:
你发过来的示例能解决静态对象的保值效果,但不能保留动态增加的对象。
估计这个问题,只能用动态网页技术了。
风斧 2004-11-07
  • 打赏
  • 举报
回复
不是这个意思。
在某个页面比如table3中,动态增加了几个行,然后链接到其它页面,由于某种原因需要回到table3,这时发现,动态增加的行没有了.怎样让动态增加的行,在这种情况下还在?
楼上发的东西,我明天在研究,
请各位大虾执教。
是是非非 2004-11-06
  • 打赏
  • 举报
回复
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
iIndex = 0;
function showIndex(){
alert(iIndex);
}

function getIndex(){
iIndex = event.srcElement.parentElement.rowIndex;
}
function insertRow(iPos){
var otr=myTable.insertRow(iPos);
var ocell=otr.insertCell(0);
ocell.innerHTML=" "
var ocell=otr.insertCell(1);
ocell.innerHTML=" "
}
function deleteRow(iPos){
document.all.myTable.deleteRow(iPos);
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(iIndex)" value="插入行">
<input type=button onclick="deleteRow(iIndex)" value="删除行">
<input type=button onclick="location.reload();" value="返回">
</form>
</BODY>
</HTML>
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-11-06 10:22
社区公告
暂无公告