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

有朋友问道:如何获取客户端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 > 3return;
            
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

posted @ 2010-07-01 16:50  邀月  阅读(1554)  评论(2编辑  收藏  举报