可编辑的 HTML JavaScript 表格控件 DataGrid.docx
《可编辑的 HTML JavaScript 表格控件 DataGrid.docx》由会员分享，可在线阅读，更多相关《可编辑的 HTML JavaScript 表格控件 DataGrid.docx（11页珍藏版）》请在冰豆网上搜索。
可编辑的HTMLJavaScript表格控件DataGrid
可编辑的 HTML JavaScript 表格控件 DataGrid
Postedbyguigui179 2005-9-2523:
23:
00
<%@pagecontentType="text/html;charset=gb2312"language="java"import="java.sql.*"errorPage=""%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
无标题文档
/*
*====================================================================================================================
*/
//定义全局的表格行列值
varcol=5;
varrow=2;
//currRowIndex选定行
varcurrRowIndex=0;
//表单域数组（这部分作废）-----------------
varelementNames=newArray（col）;
vark=0;
for（k=0;k elementNames[k]=k;
//---------------------------------------
//标题头数组
varheaders=newArray（col）;
for（k=0;k{
headers[k]="第"+k+"列";
}
//columnPropertys:
装载要创建的列读写属性
varcolPropertys=newArray（col）
for（k=0;k<10;k++）
colPropertys[k]=1;
colPropertys[0]=0;
//colDefaultValues:
代表每次增加行的时候需要装入的默认值
varcolDefaultValues=newArray（col）;
for（k=0;k{
if（k%2==0）
colDefaultValues[k]="o";
else
colDefaultValues[k]="j"; //代表这个不是默认值
}
//dataArray:
需要修改的数据集,修改之前预先装入,供用户参考
vardataArray=newArray（row*col）;
varm=0,n=0;
for（m=0;m{
for（n=0;n {
dataArray[m*col+n]="array（"+m+","+n+"）"; //注意这里代表2维数组
}
}
/*
*====================================================================================================================
*/
varoPopup=window.createPopup（）;
//创建一个公共的可编辑的表格
//参数：
// formName:
表单名
// action:
代表当前要执行的提交动作:
1:
add2:
del3:
modefy4:
query
// formAction:
表格对应Form的Action
// tableId：
表格ID
// colNum：
表单列数目
// rowNum：
初始表格的行数目
functionCreateTable（formName,action,formAction,tableId,colNum,rowNum）
{
varstartStr=newString（""）;
varendStr=newString（""）;
varcolStr=newString（""）;
startStr="";
startStr+="";
colStr=createTrs（colNum,rowNum）;
endStr="";
//创建用来获取最后表格输出数据的隐藏域
varhiddens=CreateHiddens（colNum,action）;
endStr+=hiddens;
endStr+="";
//输出表格
//document.forms（0）.elements（"t"）.value=（startStr+colStr+endStr）;
document.write（startStr+colStr+endStr）;
}
functionCreateHiddens（cols,action）
{
varstr=newString（""）;
vari=0;
for（i=0;i {
str+="";
}
str+="";
returnstr;
}
functioncreateTrs（colNum,rowNum）
{
varcolStr=newString（""）;
vari=0;
varj=0;
colStr+=""
//创建表头行
colStr+=""
colStr+="序号";
colStr+="";
for（i=1;i<=colNum;i++）
{
colStr+="";
colStr+=headers[i-1];
colStr+="";
}
//创建表体行
for（i=0;i {
colStr+=" colStr+="onDblClick=\"ChangeInput（this）;\""; //表格行中的事件支持部分
colStr+="onBlur=\"ResetTR（this）;\">";
//创建每行的所有单元格
colStr+="";
colStr+=i+1;
colStr+="";
for（j=1;j<=colNum;j++）
{
colStr+="";
colStr+=dataArray[i*colNum+j-1];
colStr+="";
}
colStr+="";
}
returncolStr;
}
//把某行转变为输入状态
functionChangeInput（objTR）
{
varstr=newString（""）;
vari=0;
for（i=1;i {
str=""+objTR.cells[i].width+"\"";
//装入默认值
if（colDefaultValues[i-1]=="j"） //j代表该列不能装入默认值
str+="value=\""+objTR.cells[i].innerText+"\"";
else//否则装入默认值
str+="value=\""+colDefaultValues[i-1]+"\"";
//控制控件的读写属性
if（colPropertys[i-1]==0）
{
str+="disabled";
}
str+="/>";
objTR.cells[i].innerHTML=str;
}
objTR.ondblclick=doNothing; //使行保持原始状态
}
//把行恢复为非输入状态
functionResetTR（objTR）
{
varstr=newString（""）;
vari=0;
for（i=0;i {
varobjChild;
vartmpStr="";
tmpStr=objTR.cells[i].innerHTML;
//里面包含控件
if（objTR.cells[i].firstChild!
=undefined&&objTR.cells[i].firstChild.value!
=undefined）
{
tmpStr=objTR.cells[i].firstChild.value;
if（tmpStr==""）
tmpStr=" "
objTR.cells[i].innerHTML=tmpStr+" ";
continue;
}
//里面不包含控件
if（tmpStr==" "||tmpStr==""）
{
if（objTR.cells[i].innerHTML!
=""）
tmpStr+=objTR.cells[i].innerHTML;
else
tmpStr+=" ";
}
objTR.cells[i].innerHTML=tmpStr;
if（objTR.cells[i].innerHTML==""）
objTR.cells[i].innerHTML=" ";
}
}
//对表格指定列进行排序
functionorderTB（objTB,index,type）{
for（vari=1;i<（objTB.rows.length-1）;i++）{
for（varj=i+1;j vartmp1,tmp2;
if（objTB.rows[j].cells[index].firstChild.value==undefined）
tmp1=objTB.rows[j].cells[index].innerText;
else
tmp1=objTB.rows[j].cells[index].firstChild.value;
if（objTB.rows[i].cells[index].firstChild.value==undefined）
tmp2=objTB.rows[i].cells[index].innerText;
else
tmp2=objTB.rows[i].cells[index].firstChild.value;
if（tmp1>tmp2）
{
objTB.moveRow（j,i）;
}
}
}
}
functionorderTb1（objTD,type）
{
varobjTR=objTD.parentElement;
varobjTable=objTR.parentElement;
varcolIndex=objTD.cellIndex;
orderTB（objTable,colIndex）;
}
//在表格末尾增加一行
functionInsertRow（tableId）
{
varobjTable=document.getElementById（tableId）;
varcol=objTable.cells.length/objTable.rows.length;
varrow=objTable.rows.length;
varobjRow=objTable.insertRow（）; //增加行
vari=0;
//取得最大序号
varmax1=1;
for（i=1;i {
vartmpMax=1;
if（parseFloat（objTable.rows[i].cells[0].innerText）>parseFloat（objTable.rows[i+1].cells[0].innerText））
{
tmpMax=parseFloat（objTable.rows[i].cells[0].innerText）;
}
else
{
tmpMax=parseFloat（objTable.rows[i+1].cells[0].innerText）;
}
if（tmpMax>=max1）
max1=tmpMax;
}
for（i=1;i<=col;i++）
{
varobjCell=objRow.insertCell（）;
objRow.cells[0].innerText=parseFloat（max1）+1;
objCell.innerHTML=" ";
objCell.onmouseover=Td_MouseOver_Handle;
objCell.onmouseout=Td_MouseOut_Handle
objRow.cells[0].onclick=TD_Click_Handle;
objRow.cells[0].onmouseover=doNothing;
objRow.cells[0].onmouseout=doNothing;
}
//为新增的行提供事件绑定支持
//objRow.attachEvent（'ondblclick',dblClick_Handle）;
objRow.ondblclick=dblClick_Handle;
objRow.onblur=click_Handle;
}
//删除最后1行
functionDeleteRow（tableId）
{
varobjTable=document.getElementById（tableId）;
if（objTable.rows.length==1）
{
alert（"对不起，你不能删除表格头!
!
!
"）;
return;
}
if（confirm（"确定删除?
"））
{
objTable.deleteRow（）;
}
}
//选定指定行
functionSelectRow（objTD）
{
varobjTR=objTD.parentElement;
varobjTable=objTR.parentElement;
for（vari=1;i objTable.rows[i].cells[0].bgColor="#ffffff";
objTD.bgColor="#ff0000";
currRowIndex=objTR.rowIndex;
}
//删除指定的行
functionDeleteOneRow（tableId,rowIndex）
{
varobjTable=document.getElementById（tableId）;
varobjTable=document.getElementById（tableId）;
if（objTable.rows.length==1||rowIndex==0）
{
alert（"对不起，你首先必须选择要删除的行！
！
！
"）;
return;
}
if（confirm（"确定删除?
"））
{
objTable.deleteRow（rowIndex）;
currRowIndex=0;
}
else
{
for（vari=1;i {
objTable.rows[i].cells[0].bgColor="#ffffff";
currRowIndex=0;
}
}
}
//鼠标选择指定列
function TD_Click_Handle（）
{
SelectRow（this）
}
//鼠标移入事件支持
functionTd_MouseOver_Handle（）
{
this.bgColor="#00ccff";
}
//鼠标移出事件支持
functionTd_MouseOut_Handle（）
{
this.bgColor="#ffffff";
}
//鼠标双击事件支持
functiondblClick_Handle（）
{
ChangeInput（this）;//切换到输入状态
this.ondblclick=doNothing;
}
//鼠标单击事件支持
functionclick_Handle（）
{
ResetTR（this）;
}
//保持行的原始状态
functiondoNothing（）
{
return;
}
functionshowTip（msg）
{
with（oPopup.document.body）
{
style.backgroundColor="lightyellow";
style.border="solidblack1px";
style.fontSize=12;
innerHTML=msg;
}
oPopup.show（event.x,event.y,95,16,document.body）;
}
functionhideTip（）
{
if（oPopup!
=undefined）
oPopup.hide（）;
}
//==============================格式化字符串函数（删除前后空格）========================================================
functiontrim（str）
{
vartmpStr=newString（str）;
varstartIndex=0,endIndex=0;
for（vari=0;i {
if（tmpStr.charAt（i）==""）
{
continue;
}
else
{
startIndex=i;
break;
}
}
for（vari=tmpStr.length;i>=0;i--）//注意开始最大下标必须减1
{
if（tmpStr.charAt（i-1）==""）
{
continue;
}
else
{
endIndex=i;
break;
}
}
tmpStr=tmpStr.substring（startIndex,endIndex）;
returntmpStr;
}
//====================================================================================================================
//submit方法
functiongetData（tableId,form）
{
varobjTable=document.getElementById（tableId）;
varcols=objTable.cells.length/objTable.rows.length-1;
varrows=objTable.rows.length-1;
//为每个隐藏域设置值
vari=0,j=0;
for（i=1;i<=cols;i++）
{
for（j=1;j<=rows;j++）
{
if（objTable.rows[j].cells[i].firstChild.value="/=undefined）
{
document.forms（form）.elements（""col"+i）.value+=trim（objTable.rows[j].cells[i].innerText）;
}
else
document.for
升级会员 