自己写所见既所得的动态表格控件,使用比较方便,可以直接用网页编辑工具先将动态表格画出来,然后指定其中的某一行为模版行程序就可以根据模版行的内容动态的生成可编辑的表格了。目前就是对单选钮的支持有点问题(因为动态表格都是用的数组实现的,所以单选钮分组就有问题)看大家有什么好的解决办法告诉我。
以下是flexgrid.js的代码:
/**
* 功能描述: 可编辑表格类FlexGrid
* 属性:
* tableobj——表格对象(只读)
* objname——表格对象的名称(只读)
* backgroundColor——未选中时内容行的背景颜色(可写)
* color——未选中时内容行的前景颜色(可写)(控件的前景色在未选中的时候无法改变(因为控件在为选中行的情况下是只读属性,颜色为禁用色))
* selectedbackgroundColor——选中时内容行的背景颜色(可写)
* selectedColor——选中时内容行的前景颜色(可写)
* RowContentModule——模版行对象(只读)
* rowcount——总行数(不含表头)(只读)
* colcount——总列数(内容行列数)(只读)
* cellsmodule——模版行中单元格内容集合(HTML代码形式,cellsmodule[列索引(0开始)]——返回该列的模版内容)(只读)
* startrowindex——内容行开始的行索引(基于整个表格对象的(包含表头))(只读)
* selectedrowid——当前选中的行索引(基于整个表格对象的(包含表头),为-1时表示没有行选中)(只读)
*方法:
* addnewrow()——添加新行
* getvalue(objname,rowindex)——返回对象值(objname对象名称,rowindex行索引(不包含表头,从0开始))
* setvalue(objname,rowindex,values)——设置对象值(objname对象名称,rowindex行索引(不包含表头,从0开始),values值)
* selectedrow(newselectedrowid)——选定行(newselectedrowid要选择的行索引(包含表头))
* getobjtype(obj)——返回表单对象的类型代码(obj表单对象)
* deleterow()——删除选定行
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
/**
* 功能描述: 可编辑表格类构造函数
* 输入参数: tblobj——表格对象(<table>对象)
* RowContentModule——模板行对象(<tr>对象)
* 该行以上为动态表的表头,该行用于构造其它内容行,在运行时该行不存在(已被删除)
* 目前版本的仅支持文本框、密码框、多行文本框、单选列表框、复选按钮表单对象(已测试)
* 对于单选按钮只支持按列分组,不支持按行分组
* objname——表格对象名称(字符型,表格对象的名称)
* 返回值:可编辑表格类FlexGrid对象
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function FlexGrid(tblobj,RowContentModule,objname)
{
this.tableobj=tblobj;
this.objname=objname;
this.backgroundColor="#FFFFFF"
this.color="#ff0000";
this.selectedbackgroundColor="#63BADA"
this.selectedColor="#0000ff";
this.RowContentModule=RowContentModule;
this.rowcount=0;
this.colcount=RowContentModule.cells.length;
this.cellsmodule=new Array(this.colcount);
this.startrowindex=RowContentModule.rowIndex;
for(i=0;i<this.colcount;i++)
{
this.cellsmodule[i]=RowContentModule.cells[i].innerHTML;
}
this.selectedrowid=-1;
this.tableobj.deleteRow(RowContentModule.rowIndex);
this.addnewrow=tbl_addnewrow;
this.getvalue=tbl_getvalue;
this.setvalue=tbl_setvalue;
this.selectedrow=tbl_selectedrow;
this.getobjtype=tbl_getobjtype;
this.deleterow=tbl_deleterow;
} /**
* 功能描述: 添加新行
* 输入参数: 无
* 返回值:新行的行索引(包含表头)
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function tbl_addnewrow()
{
var row=this.tableobj.insertRow(this.startrowindex+this.rowcount);
var rowcontent=""
for(var i=0;i<this.cellsmodule.length;i++)
{
myNewCell=row.insertCell(i);
}
this.selectedrow(row.rowIndex);
this.rowcount++;
return row.rowIndex;
} /**
* 功能描述: 获取指定行中对象的值
* 输入参数: objname——对象名称
* rowindex——行索引(不包含表头,从0开始)
* 返回值:指定行中对象的值,无效时候返回null
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function tbl_getvalue(objname,rowindex)
{
var obj=eval("document.all."+objname);
if(obj==null){return null;}
if(rowindex>=this.rowcount){return null;}
if(this.rowcount==0){return null;}
if(this.rowcount!=1)
{
obj=obj[rowindex];
}
var ret=null; switch(obj.type)
{
case 'button':
ret=obj.value;
break ;
case 'checkbox':
ret=obj.status;
break ;
case 'radio':
ret=obj.status;
break ;
case 'file':
ret=0;
break ;
case 'image':
ret=0;
break ;
case 'password':
ret=obj.value;
break ;
case 'submit':
ret=obj.value;
break ;
case 'reset':
ret=obj.value;
break ;
case 'text':
ret=obj.value;
break ;
case 'select-multiple':
ret= null;
break ;
case 'select-one':
ret=obj.options[obj.selectedIndex].value;
break ;
case 'textarea':
ret=obj.value;
break ;
case 'hidden':
ret=obj.value;
break;
default:
ret=null;
} return ret;
} /**
* 功能描述: 设置指定行中对象的值
* 输入参数: objname——对象名称
* rowindex——行索引(不包含表头,从0开始)
* vaules——值
* 返回值:成功返回true,失败返回false
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function tbl_setvalue(objname,rowindex,vaules)
{
var obj=eval("document.all."+objname);
if(obj==null){return null;}
if(rowindex>=this.rowcount){return false;}
if(this.rowcount==0){return false;}
if(this.rowcount!=1)
{
obj=obj[rowindex];
}
switch(obj.type)
{
case 'button':
return false;
break;
case 'checkbox':
alert(values);
obj.checked=values;
return true;
break;
case 'radio':
return false;
break;
case 'file':
return false;
break;
case 'image':
return false;
break;
case 'password':
obj.value=values;
return true;
break;
case 'submit':
return false;
break;
case 'reset':
return false;
break;
case 'text':
obj.value=values;
return true;
break;
case 'select-multiple':
return false;
break;
case 'select-one':
for(var i=0;i<obj.options.length;i++)
{
if(obj.options[i].value==values)
{
obj.selectedIndex=i;
return true;
break;
}
}
return false;
break;
case 'textarea':
obj.value=values;
break;
case 'hidden':
obj.value=values;
break;
}}
/**
* 功能描述: 返回表单对象类型
* 输入参数: obj——表单对象
* 返回值:对于支持的对象返回相应的对象码,对于不支持的对象返回-1
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function tbl_getobjtype(obj)
{
if(obj.type=='button'){return 0;}
if(obj.type=='checkbox'){return 1;}
if(obj.type=='file'){return 2;}
if(obj.type=='image'){return -1;}
if(obj.type=='password'){return 4;}
if(obj.type=='submit'){return 5;}
if(obj.type=='reset'){return 6;}
if(obj.type=='text'){return 7;}
if(obj.type=='select-multiple'){return 8;}
if(obj.type=='select-one'){return 9;}
if(obj.type=='textarea'){return 10;}
if(obj.type=='hidden'){return -1;}
return -1;
} /**
* 功能描述: 选择行
* 输入参数: newselectedrowid——要选中的行索引(包含表头)(可选的,缺省时通过鼠标时间回朔选中的行索引
* 返回值:无
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function tbl_selectedrow(newselectedrowid)
{
var fromevent=false;//判断方法是通过什么途径调用的,false时为函数调用,true时为事件调用;
if(newselectedrowid==null)
{
var obj=event.srcElement;
while(obj!=null&&obj.tagName!='TR')
{
obj=obj.parentElement;
}
if(obj!=null)
{
newselectedrowid=obj.rowIndex;
}
else
{
return;
}
fromevent=true;
}
if(newselectedrowid<0||newselectedrowid==null){return;}
if(this.selectedrowid==newselectedrowid&&fromevent){return;}
var cell;
var content;
if(this.selectedrowid!=-1)
{
this.tableobj.rows[this.selectedrowid].style.backgroundColor =this.backgroundColor ;
this.tableobj.rows[this.selectedrowid].style.color =this.color ;
for(var i=0;i<this.tableobj.rows[this.selectedrowid].cells.length;i++)
{
cell=this.tableobj.rows[this.selectedrowid].cells[i];
content=cell.children[0];
for(var j=0;j<content.children.length;j++)
{
if(this.getobjtype(content.children[j])!=-1)
{
content.children[j].style.backgroundColor = this.backgroundColor;
content.children[j].style.color =this.color ;
}
}
}
}
if(newselectedrowid==-1){return;}
this.tableobj.rows[newselectedrowid].style.backgroundColor = this.selectedbackgroundColor;
this.tableobj.rows[newselectedrowid].style.color =this.selectedColor ;
for(var i=0;i<this.tableobj.rows[newselectedrowid].cells.length;i++)
{
cell=this.tableobj.rows[newselectedrowid].cells[i];
content=cell.children[0];
for(var j=0;j<content.children.length;j++)
{
if(this.getobjtype(content.children[j])!=-1)
{
content.children[j].style.backgroundColor = this.selectedbackgroundColor;
content.children[j].style.color =this.selectedColor ;
}
}
}
this.selectedrowid=newselectedrowid;
} /**
* 功能描述: 删除选定的行
* 输入参数: 无
* 返回值:无
* 作者:Sundy_QSW
* 单位:www.topit.com.cn * 日期:2004/05/13
*/
function tbl_deleterow()
{
if(this.selectedrowid==-1)
{
alert("请选择要删除的行");
return;
}
var lastrow=false;
var firstrow=false;
if(this.selectedrowid-this.startrowindex+1==this.rowcount)//最后一行
{
lastrow=true;
}
if(this.selectedrowid==this.startrowindex)
{
firstrow=true;
}
this.tableobj.deleteRow(this.selectedrowid);
this.rowcount--;
if(this.rowcount==0)
{
this.selectedrowid=-1;
this.selectedrow(this.selectedrowid);
return;
}
if(lastrow)
{
this.selectedrowid--;
this.selectedrow(this.selectedrowid);
return;
}
this.selectedrow(this.selectedrowid);
}测试页面sample.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态表格范例</title>
<!--引用动态表格库-->
<script language="JavaScript" src="flexgrid.js"></script><script language="JavaScript">
var grd;//定义动态表格对象
function addnewrow()//添加新行
{
grd.addnewrow();
}
function getvalue()//获取指定单元格的内容
{
rowid=document.all.sindex.value;
objname=document.all.objnames.value;
alert(grd.getvalue(objname,rowid));}
function setvalue()//设置指定单元格的内容
{
rowid=document.all.sindex.value;
objname=document.all.objnames.value;
values=document.all.newvalues.value;
grd.setvalue(objname,rowid,values);
}
function delrow()//删除指定行
{
//alert('del');
grd.deleterow();
}
</script>
</head><body onLoad="grd=new FlexGrid(document.all.tsttbl,document.all.rowmodul,'grd');//实例化动态表格对象">
<table border="1" id="tsttbl"><!--动态表格对象-->
<tr >
<td colspan="7">表单对象</td>
</tr>
<tr >
<td >text</td>
<td>textarea</td>
<td>radio</td>
<td>checkbox</td>
<td>password</td>
<td>select</td>
<td>hidden</td>
</tr>
<tr >
<td >a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
<td>a7</td>
</tr>
<tr id="rowmodul"><!--模版行对象-->
<td ><input name="a1" value="text"></td>
<td><textarea name="a2">textarea</textarea></td>
<td ><input type="radio" name="a3" value=1></td>
<td><input type="checkbox" name="a4"></td>
<td><input type="password" name="a5" value="password"></td>
<td><select name="a6">
<option value="1">值为1</option>
<option value="2">值为2</option>
<option value="3">值为3</option>
<option value="4">值为4</option>
<option value="5">值为5</option>
</select>
</td>
<td><input type="hidden" name="a7" value="hidden"></td>
</tr>
<tr >
<td >1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>行索引<input type="text" name="sindex" value="0">
对象名<input type="text" name="objnames" value="a1">
值<input type="text" name="newvalues" value="1111">
<input type="button" value="add" onClick="addnewrow()">
<input type="button" value="getvalue" onClick="getvalue()">
<input type="button" value="setvalue" onClick="setvalue()">
<input type="button" value="delrow" onClick="delrow()">
</body>
</html>