首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Dom动态生成报表和控件及动态取值

2012-11-22 
Dom动态生成表格和控件及动态取值1、jsp代码如下:?tabletrtd colspan2动态生成控件/td/tr?tr

Dom动态生成表格和控件及动态取值
1、jsp代码如下:

?

<table>

<tr><td colspan="2">动态生成控件</td></tr>

?<tr>
???<td colspan="2">
????<table name='tbl' id="tbl" border="0" width=350>
????</table>
???</td>
??</tr>

<tr>
???<td colspan=2>
????<input type='button' value=' 扩展字段 ' onclick='insert_row()' style='color: #FFFF00; border: 1px ridge #FFFF00; background-color: #0066FF'/>
????&nbsp;
????<input type="button" value=" 确定 " onclick="doVerify()" style='color: #FFFF00; border: 1px ridge #FFFF00; background-color: #0066FF'/>
???</td>
??</tr>

</table>

?

2、js代码如下:

var i=0
function insert_row(){
i++
R=tbl.insertRow()
C1=R.insertCell()
C1.innerHTML="<input type='text' name='text1' style='color: #000080; border: 1px solid #008080; background-color: #FFFFFF'>"
C2=R.insertCell()
C2.style.width="25%"
C2.innerHTML="文本框"+i
C3=R.insertCell()
C3.style.width="25%"
C3.innerHTML="<div align='center'><input type=button value=' 删除 ' style='color: #FFFF00; border: 1px ridge #FFFF00; background-color: #0066FF'></div>"?????
C3.onclick=executeDel;
}


function executeDel()
{
?var sltRow=this.parentNode;
?tbl.deleteRow(sltRow.rowIndex);
}


//验证及取值

function doVerify(){
?//var ii=document.form1.text1;//条件一
?var ii = document.getElementsByName("text1");
?var rows=tbl.rows;
?var value1="";
?for(row=0;row<=ii.length-1;row++)
?{
??var thisrow=rows.item(row);
??var cells=thisrow.cells;??? //所在行的单元格的集合:
??verifyValue = cells.item(0).childNodes[0].value;
??//alert("verifyValue=="+verifyValue);
??if(verifyValue == ""){
???alert("不能为空!");
???cells.item(0).childNodes[0].focus();
???return false;
??}
??if(/^[0-9]/.test(verifyValue)){
???alert("第一个字符不能为数字!");
???cells.item(0).childNodes[0].focus();
???return false;
??}
???? value1+=cells.item(0).childNodes[0].value+'@';
?}
?//alert(value1);???值已取到
?document.form1.fieldHidden.value = value1;
?//document.form1.action="ef!extendField.action";
?document.form1.submit();
}

热点排行