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'/>
????
????<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();
}