1.通过table访问其内部的所有数据
在取得table对象之后,如果想访问他的内部元素可以通过如下的语句进行访问oRowCollection=oTable.firstChild.childNodes
这样就得到了一个由行组成的对象集合,因为在HTML代码中Table的下一层元素就是TR,因此我以为通过oTable.childNodes就可以直接访问到行集合,但事实证明我的想法是错误的,使用alert(oTable.innerHTML)语句查看他的内部结构之后才发现原来Table的下一层元素是一个TBody元素,通过TBody元素将所有的行包裹起来,因此在中间需要使用firstChild将其跳过去才可以。如果想遍历每一个行对象之需要循环就可以了
nRowCount=oRowCollection.length;
for(i=0;i<nRowCount;i++)
{
oRow=oRowCollection(i);
}
这样就可以访问到每个行对象了,也就是TR元素。紧接着要做的事情就是通过行对象访问每一个单元格了,在这个地方几乎没有遇到什么困难,因为行对象的下一层元素就是单元格,而没有上一层访问的附加对象,因此通过下面的代码就可以访问每一个单元格了
oCellCollection=oRow.childNodes;
nCellCount=oCellCollection.length;
for(i=0;i<nCellCount;i++)
{
oCell=oCellCollection(i);
}
得到单元格对象之后,使用oCell.innerText或者oCell.innerHTML就可以访问其中的内容了,接下来的东西就已经非常容易了。
2.通过单元格访问其所在Table的所有数据
刚才提到了通过Table访问每一个单元格的数据,那么反过来也同样是能够访问的,使用下面的代码就可以访问了
oRow=oCell.parentNode;//获取单元格所在的行对象,也就是TR元素
oTable=oRow.parentNode.parentNode;//获取行对象所在的表格,也就是Table元素
接下来使用所得到的oTable对象再访问其中的每一个行对象或者单元格就可以实现通过单元格访问其所在Table的所有数据的功能了。
3.通过服务器脚本与客户段脚本相结合实现ASP.NET的元素数据保持功能
在ASP.NET中,通过一个隐藏的VIEWSTATE元素将每个表单元素的值收集起来加密后送到服务器进行处理,通过这种方法实现了在表单提交后保持每个元素的值和状态不发生变化。但是在ASP3.0中并没有这个功能,这给使用带了很大的不便,为了实现这个功能,我尝试着写了一个过程,经过测试之后效果还不错。
'保持编辑面板的控件值
Sub KeepPannelValue
Response.Write("var oElements,oElement;"
For Each p_Attribute In Request.Form
'Response.Write("try{"
Response.Write("oElements=document.getElementsByName('"&p_Attribute&"');"&vbCrLf)
For i=1 To Request.Form(p_Attribute).Count
Response.Write("oElement=oElements("&CStr(i-1)&"
"&vbCrLf)
Response.Write("if(oElement.tagName.toLowerCase()=='select')SetDropDownListValue(oElement,'"&Request.Form(p_Attribute)(i)&"');"&vbCrLf)
Response.Write("switch(oElement.type){"&vbCrLf)
Response.Write(" case 'text':"&vbCrLf)
Response.Write(" oElement.value='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'password':"&vbCrLf)
Response.Write(" oElement.value='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'hidden':"&vbCrLf)
Response.Write(" oElement.value='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'radio':"&vbCrLf)
Response.Write(" oElement.checked='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'checkbox':"&vbCrLf)
Response.Write(" oElement.checked=true;"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write("}"&vbCrLf)
Next
Next
End Sub
对于INPUT元素Type为text, password,
hidden的几种情况使用效果还可以,只是没有解决单引号的问题,其他的情况还没有测试。对于Select元素我调用一个SetDropDownListValue函数来实现选择值的保持,这个函数的代码为
//通过选项的值设置下拉列表被选择的项
function SetDropDownListValue(oDropDownList,strValue)
{
nLength=oDropDownList.length;
for(i=0;i<nLength;i++)
{
if(oDropDownList.options[i].value==strValue)
{
oDropDownList.selectedIndex=i;
return;
}
}
oDropDownList.selectedIndex=0;
}
为了使用方便我写了一个跟它类似的函数
//通过选项的文本设置下拉列表被选择的项
function SetDropDownListText(oDropDownList,strText)
{
nLength=oDropDownList.length;
for(i=0;i<nLength;i++)
{
if(oDropDownList.options[i].innerText==strText)
{
oDropDownList.selectedIndex=i;
return;
}
}
oDropDownList.selectedIndex=0;
}
由于时间原因和实际应用我没有把所有的表单元素都囊括进来,因此为了实现更好的功能和他的适用性还需要不断地进行完善。
4.在写网站的时候经常会遇到分页的情况,通常的做法是每次页面跳转都会把整个页面刷新一次,并且向当前的页面发送一个表示当前页面序号的值,例如
http://www.site.com/index.asp?Page=2。但是这样的话会让许多计算重复进行——虽然他们每次的计算值都是相同的。为了解决这个问题,我采用了另外的一种方法,将分页显示的部分数据集中起来,并且每次页面跳转的时候只需要刷新这部分数据就可以了。在实际实现的时候我将页面跳转刷新部分放到另外的一个页面并在主页面通过IFrame进行调用,每次进行页面跳转的时候只要修改IFrame的Src属性就可以了。但是跳转的时候页面跳转的连接不需要刷新,只需要用JS进行动态更新就可以,为此我写了一个JS的对象使用起来虽然有很多限制,但是还是解决了很多的问题。这个对象的代码为
function Pager(obj,nPageSize,nRecordNumber){
this.obj=obj;
this.PageSize=nPageSize;
this.RecordNumber=nRecordNumber;
this.CurrentPage=0;
this.PageCount=0;
this.target='';
this.html='';
}
Pager.prototype.Bind=function(targetFrameId){
this.target=targetFrameId;
}
Pager.prototype.SetUri=function(strUri)
{
this.baseUri=strUri;
}
Pager.prototype.ChangePage=function(nPageNumber)
{
this.CurrentPage=nPageNumber;
if(this.CurrentPage>this.PageCount)this.CurrentPage=this.PageCount;
if(this.CurrentPage<=0)this.CurrentPage=1;
document.getElementById('FirstPage').style.display=(this.CurrentPage>1)?'block':'none';
document.getElementById('PreviewPage').style.display=(this.CurrentPage>1)?'block':'none';
document.getElementById('NextPage').style.display=(this.CurrentPage<this.PageCount)?'block':'none';
document.getElementById('LastPage').style.display=(this.CurrentPage<this.PageCount)?'block':'none';
document.getElementById('ddlPager').style.display=(this.PageCount>1)?'block':'none';
document.getElementById('PageNumber').style.display=(this.PageCount>1)?'block':'none';
document.getElementById(this.target).src=this.baseUri+'?Page='+this.CurrentPage;
document.getElementById('PageNumber').innerHTML=this.CurrentPage+' of '+this.PageCount;
SetDropDownListValue(document.getElementById('ddlPager').firstChild.firstChild.firstChild.childNodes(1).firstChild.firstChild.firstChild,this.CurrentPage)
}
Pager.prototype.MoveFirstPage=function()
{
if(this.PageCount>0)
{
this.ChangePage(1);
}
else
{
this.ChangePage(0);
}
}
Pager.prototype.MovePreviewPage=function()
{
this.ChangePage(this.CurrentPage-1);
}
Pager.prototype.MoveNextPage=function()
{
this.ChangePage(this.CurrentPage+1);
}
Pager.prototype.MoveLastPage=function()
{
this.ChangePage(this.PageCount);
}
Pager.prototype.Show=function()
{
if(this.PageSize>0)
{
if(this.RecordNumber>0)
{
this.PageCount=parseInt(this.RecordNumber/this.PageSize)+1;
}
else
{
this.PageCount=0;
}
}
if(this.PageCount==0)
{
this.CurrentPage=0;
}
else
{
this.CurrentPage=1;
}
this.html="<table id='Pager' align=right onselectstart='return false' cellspacing=0 height=1 cellpadding=0 border=0>"
+"<tr>"
+"<td align=center style='display:none;padding-left:5px' id='PageNumber' align=center></td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='FirstPage'
onClick='"+this.obj+".MoveFirstPage()'>第一页</td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='PreviewPage'
onClick='"+this.obj+".MovePreviewPage()'>上一页</td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='NextPage'
onClick='"+this.obj+".MoveNextPage()'>下一页</td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='LastPage'
onClick='"+this.obj+".MoveLastPage()'>最后一页</td>"
+"<td align=center id='ddlPager' style='display:none;padding-left:5px'><table><tr><td>转到</td>"
+"<td><span class='box' style='WIDTH: 32px; '><div class='box2' style='WIDTH: 30px; '><Select name='Page'
onChange='"+this.obj+".ChangePage(this.options[this.selectedIndex].value)'>";
for(i=1;i<=this.PageCount;i++)
{
this.html+="<Option value='"+i+"'>"+i+"</option>";
}
this.html+="</Select></div></span></td><td>页</td></tr></table></td></tr></table>";
document.write(this.html);
this.MoveFirstPage();
}
在使用的时候只要在需要显示的地方按照下面的方法写入代码就可以了
var oPager=new Pager('oPager',PageSize,RecordNumber);//生成页面跳转对象
oPager.Bind('AdminWebGrid');//绑定到IFrame对象
oPager.SetUri('AdminList.asp');//设置IFrame对象中的翻页文件
oPager.Show();//显示页面跳转对象
在取得table对象之后,如果想访问他的内部元素可以通过如下的语句进行访问oRowCollection=oTable.firstChild.childNodes
这样就得到了一个由行组成的对象集合,因为在HTML代码中Table的下一层元素就是TR,因此我以为通过oTable.childNodes就可以直接访问到行集合,但事实证明我的想法是错误的,使用alert(oTable.innerHTML)语句查看他的内部结构之后才发现原来Table的下一层元素是一个TBody元素,通过TBody元素将所有的行包裹起来,因此在中间需要使用firstChild将其跳过去才可以。如果想遍历每一个行对象之需要循环就可以了
nRowCount=oRowCollection.length;
for(i=0;i<nRowCount;i++)
{
oRow=oRowCollection(i);
}
这样就可以访问到每个行对象了,也就是TR元素。紧接着要做的事情就是通过行对象访问每一个单元格了,在这个地方几乎没有遇到什么困难,因为行对象的下一层元素就是单元格,而没有上一层访问的附加对象,因此通过下面的代码就可以访问每一个单元格了
oCellCollection=oRow.childNodes;
nCellCount=oCellCollection.length;
for(i=0;i<nCellCount;i++)
{
oCell=oCellCollection(i);
}
得到单元格对象之后,使用oCell.innerText或者oCell.innerHTML就可以访问其中的内容了,接下来的东西就已经非常容易了。
2.通过单元格访问其所在Table的所有数据
刚才提到了通过Table访问每一个单元格的数据,那么反过来也同样是能够访问的,使用下面的代码就可以访问了
oRow=oCell.parentNode;//获取单元格所在的行对象,也就是TR元素
oTable=oRow.parentNode.parentNode;//获取行对象所在的表格,也就是Table元素
接下来使用所得到的oTable对象再访问其中的每一个行对象或者单元格就可以实现通过单元格访问其所在Table的所有数据的功能了。
3.通过服务器脚本与客户段脚本相结合实现ASP.NET的元素数据保持功能
在ASP.NET中,通过一个隐藏的VIEWSTATE元素将每个表单元素的值收集起来加密后送到服务器进行处理,通过这种方法实现了在表单提交后保持每个元素的值和状态不发生变化。但是在ASP3.0中并没有这个功能,这给使用带了很大的不便,为了实现这个功能,我尝试着写了一个过程,经过测试之后效果还不错。
'保持编辑面板的控件值
Sub KeepPannelValue
Response.Write("var oElements,oElement;"
![](http://www.blogcn.com/images/wink.gif)
For Each p_Attribute In Request.Form
'Response.Write("try{"
![](http://www.blogcn.com/images/wink.gif)
Response.Write("oElements=document.getElementsByName('"&p_Attribute&"');"&vbCrLf)
For i=1 To Request.Form(p_Attribute).Count
Response.Write("oElement=oElements("&CStr(i-1)&"
![](http://www.blogcn.com/images/wink.gif)
Response.Write("if(oElement.tagName.toLowerCase()=='select')SetDropDownListValue(oElement,'"&Request.Form(p_Attribute)(i)&"');"&vbCrLf)
Response.Write("switch(oElement.type){"&vbCrLf)
Response.Write(" case 'text':"&vbCrLf)
Response.Write(" oElement.value='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'password':"&vbCrLf)
Response.Write(" oElement.value='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'hidden':"&vbCrLf)
Response.Write(" oElement.value='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'radio':"&vbCrLf)
Response.Write(" oElement.checked='"&Request.Form(p_Attribute)(i)&"';"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write(" case 'checkbox':"&vbCrLf)
Response.Write(" oElement.checked=true;"&vbCrLf)
Response.Write(" break;"&vbCrLf)
Response.Write("}"&vbCrLf)
Next
Next
End Sub
对于INPUT元素Type为text, password,
hidden的几种情况使用效果还可以,只是没有解决单引号的问题,其他的情况还没有测试。对于Select元素我调用一个SetDropDownListValue函数来实现选择值的保持,这个函数的代码为
//通过选项的值设置下拉列表被选择的项
function SetDropDownListValue(oDropDownList,strValue)
{
nLength=oDropDownList.length;
for(i=0;i<nLength;i++)
{
if(oDropDownList.options[i].value==strValue)
{
oDropDownList.selectedIndex=i;
return;
}
}
oDropDownList.selectedIndex=0;
}
为了使用方便我写了一个跟它类似的函数
//通过选项的文本设置下拉列表被选择的项
function SetDropDownListText(oDropDownList,strText)
{
nLength=oDropDownList.length;
for(i=0;i<nLength;i++)
{
if(oDropDownList.options[i].innerText==strText)
{
oDropDownList.selectedIndex=i;
return;
}
}
oDropDownList.selectedIndex=0;
}
由于时间原因和实际应用我没有把所有的表单元素都囊括进来,因此为了实现更好的功能和他的适用性还需要不断地进行完善。
4.在写网站的时候经常会遇到分页的情况,通常的做法是每次页面跳转都会把整个页面刷新一次,并且向当前的页面发送一个表示当前页面序号的值,例如
![::URL::](http://www.blogcn.com/images/aurl.gif)
function Pager(obj,nPageSize,nRecordNumber){
this.obj=obj;
this.PageSize=nPageSize;
this.RecordNumber=nRecordNumber;
this.CurrentPage=0;
this.PageCount=0;
this.target='';
this.html='';
}
Pager.prototype.Bind=function(targetFrameId){
this.target=targetFrameId;
}
Pager.prototype.SetUri=function(strUri)
{
this.baseUri=strUri;
}
Pager.prototype.ChangePage=function(nPageNumber)
{
this.CurrentPage=nPageNumber;
if(this.CurrentPage>this.PageCount)this.CurrentPage=this.PageCount;
if(this.CurrentPage<=0)this.CurrentPage=1;
document.getElementById('FirstPage').style.display=(this.CurrentPage>1)?'block':'none';
document.getElementById('PreviewPage').style.display=(this.CurrentPage>1)?'block':'none';
document.getElementById('NextPage').style.display=(this.CurrentPage<this.PageCount)?'block':'none';
document.getElementById('LastPage').style.display=(this.CurrentPage<this.PageCount)?'block':'none';
document.getElementById('ddlPager').style.display=(this.PageCount>1)?'block':'none';
document.getElementById('PageNumber').style.display=(this.PageCount>1)?'block':'none';
document.getElementById(this.target).src=this.baseUri+'?Page='+this.CurrentPage;
document.getElementById('PageNumber').innerHTML=this.CurrentPage+' of '+this.PageCount;
SetDropDownListValue(document.getElementById('ddlPager').firstChild.firstChild.firstChild.childNodes(1).firstChild.firstChild.firstChild,this.CurrentPage)
}
Pager.prototype.MoveFirstPage=function()
{
if(this.PageCount>0)
{
this.ChangePage(1);
}
else
{
this.ChangePage(0);
}
}
Pager.prototype.MovePreviewPage=function()
{
this.ChangePage(this.CurrentPage-1);
}
Pager.prototype.MoveNextPage=function()
{
this.ChangePage(this.CurrentPage+1);
}
Pager.prototype.MoveLastPage=function()
{
this.ChangePage(this.PageCount);
}
Pager.prototype.Show=function()
{
if(this.PageSize>0)
{
if(this.RecordNumber>0)
{
this.PageCount=parseInt(this.RecordNumber/this.PageSize)+1;
}
else
{
this.PageCount=0;
}
}
if(this.PageCount==0)
{
this.CurrentPage=0;
}
else
{
this.CurrentPage=1;
}
this.html="<table id='Pager' align=right onselectstart='return false' cellspacing=0 height=1 cellpadding=0 border=0>"
+"<tr>"
+"<td align=center style='display:none;padding-left:5px' id='PageNumber' align=center></td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='FirstPage'
onClick='"+this.obj+".MoveFirstPage()'>第一页</td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='PreviewPage'
onClick='"+this.obj+".MovePreviewPage()'>上一页</td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='NextPage'
onClick='"+this.obj+".MoveNextPage()'>下一页</td>"
+"<td align=center style='cursor:hand;text-decoration:underline; display:none;padding-left:5px' id='LastPage'
onClick='"+this.obj+".MoveLastPage()'>最后一页</td>"
+"<td align=center id='ddlPager' style='display:none;padding-left:5px'><table><tr><td>转到</td>"
+"<td><span class='box' style='WIDTH: 32px; '><div class='box2' style='WIDTH: 30px; '><Select name='Page'
onChange='"+this.obj+".ChangePage(this.options[this.selectedIndex].value)'>";
for(i=1;i<=this.PageCount;i++)
{
this.html+="<Option value='"+i+"'>"+i+"</option>";
}
this.html+="</Select></div></span></td><td>页</td></tr></table></td></tr></table>";
document.write(this.html);
this.MoveFirstPage();
}
在使用的时候只要在需要显示的地方按照下面的方法写入代码就可以了
var oPager=new Pager('oPager',PageSize,RecordNumber);//生成页面跳转对象
oPager.Bind('AdminWebGrid');//绑定到IFrame对象
oPager.SetUri('AdminList.asp');//设置IFrame对象中的翻页文件
oPager.Show();//显示页面跳转对象