服务器端获取客户端动态添加的表格行数据的一个简单示例

有朋友问道：如何获取客户端js添加的表格行数据？
这里提供一种方案：
aspx文件：

    < form  id ="form1"  runat ="server" >
     < div >
         < table  width ="100%"  border ="0"  cellpadding ="2"  cellspacing ="1"  id ="SignFrame"   >
             < tr  id ="trHeader"  align ="center" >
                 < td  width ="60"  height ="25px;"  align ="center"  bgcolor ="#1C5E55"  style ="color: #FFFFFF" >
                    序号
                 </ td >
                 < td  bgcolor ="#1C5E55"  align ="center"  style ="color: #FFFFFF" >
               </ td >
             </ tr >
         </ table >
    </ div >
     < div >
        &nbsp; < input  type ="button"  name ="Submit"  value ="添加行"  onclick ="AddSignRow()"   />
         &nbsp;
         < input  type ="button"  name ="Submit2"  value ="清空"  onclick ="ClearAllSign()"   />
         < input  name ='txtTRLastIndex'  type ='hidden'  id ='txtTRLastIndex'  value ="1"   />
         < br  />
         < span  class ="notetext" > 注：最多只能3行 </ span >
     </ div >
     < asp:Button  ID ="btnInsert"  Text ="确认添加"  runat ="server"  OnClick ="btnInsert_Click"   />
     </ form >

js脚本：

     < script type = " text/javascript "  language = " javascript " >
<!--
         var  TempCount  =   1 ;  // 不可删除！downmoon 2010701
         //  Example: obj = findObj("image1");
         function  findObj(theObj, theDoc) {
             var  p, i, foundObj;
             if  ( ! theDoc) theDoc  =  document;
             if  ((p  =  theObj.indexOf( " ? " ))  >   0   &&  parent.frames.length) {
                theDoc  =  parent.frames[theObj.substring(p  +   1 )].document;
                theObj  =  theObj.substring( 0 , p);
            }
             if  ( ! (foundObj  =  theDoc[theObj])  &&  theDoc.all) foundObj  =  theDoc.all[theObj];
             for  (i  =   0 ;  ! foundObj  &&  i  <  theDoc.forms.length; i ++ )
                foundObj  =  theDoc.forms[i][theObj];
             for  (i  =   0 ;  ! foundObj  &&  theDoc.layers  &&  i  <  theDoc.layers.length; i ++ )
                foundObj  =  findObj(theObj, theDoc.layers[i].document);
             if  ( ! foundObj  &&  document.getElementById) foundObj  =  document.getElementById(theObj);

             return  foundObj;
        }
         function  AddSignRow() {
             if  (TempCount  >   3 )  return ;
             var  txtTRLastIndex  =  findObj( " txtTRLastIndex " , document);
             var  rowID  =  parseInt(txtTRLastIndex.value);
             var  signFrame  =  findObj( " SignFrame " , document);
             var  newTR  =  signFrame.insertRow(signFrame.rows.length);
            newTR.id  =   " SignItem "   +  rowID;
             var  newNameTD  =  newTR.insertCell( 0 );
            newNameTD.innerHTML  =  newTR.rowIndex.toString();
             var  newNameTD  =  newTR.insertCell( 1 );
            newNameTD.innerHTML  =   " <input name='MyFile "   +  rowID  +   " ' id='MyFile "   +  rowID  +   " ' type='text' /> " ;
            txtTRLastIndex.value  =  (rowID  +   1 ).toString();
            TempCount  =  TempCount  +   1 ;
        }
         function  DeleteSignRow(rowid) {
             var  signFrame  =  findObj( " SignFrame " , document);
             var  signItem  =  findObj(rowid, document);
             var  rowIndex  =  signItem.rowIndex;
            signFrame.deleteRow(rowIndex);
             for  (i  =  rowIndex; i  <  signFrame.rows.length; i ++ ) {
                signFrame.rows[i].cells[ 0 ].innerHTML  =  i.toString();
            }
        }
         function  ClearAllSign() {
             if  (confirm( ' 确定要清空所有输入框吗？ ' )) {
                 var  signFrame  =  findObj( " SignFrame " , document);
                 var  rowscount  =  signFrame.rows.length;
                 for  (i  =  rowscount  -   1 ; i  >   0 ; i -- ) {
                    signFrame.deleteRow(i);
                }
                 var  txtTRLastIndex  =  findObj( " txtTRLastIndex " , document);
                txtTRLastIndex.value  =   " 1 " ;
                TempCount  =   1 ;
                AddSignRow();
            }
        }
// -->
     < / script>

后台代码：

  protected  void  btnInsert_Click(object sender, EventArgs e)
        {
             int  index  =   int .Parse(Request.Form[ " txtTRLastIndex " ])  -   1 ;
            System.Text.StringBuilder sb  =   new  System.Text.StringBuilder();
             if  (index  >   0 )
            {
                 for  ( int  i  =   1 ; i  <=  index; i ++ )
                {
                    sb.Append(string.Format( " SignFrame表格行第{0}行的{1}的值为:{2}<br/> " , i,  " MyFile "   +  i, Request.Form[ " MyFile "   +  i.ToString()]));
                }
            }
            Response.Write(sb.ToString());
        }

演示效果：

如果要想实现像google,163，QQ类似的上传文件效果，可以看这里：
http://www.cnblogs.com/downmoon/archive/2008/07/23/1249410.html

转载于:https://www.cnblogs.com/downmoon/archive/2010/07/01/1769309.html