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