zoukankan      html  css  js  c++  java
  • 服务器端获取客户端动态添加的表格行数据的一个简单示例

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

  • 相关阅读:
    谷粒商城学习——P122 es分词&安装ik分词
    谷粒商城学习——P125 springboot 整合es
    谷粒商城学习——P70 概念SPU&SKU&规格参数&销售属性
    某大学渗透实录
    第五届强网杯全国网络安全挑战赛writeup
    首届北京大学信息安全综合能力竞赛writeup
    深入诈骗团队
    首届"鹤城杯"CTF网络安全挑战赛 初赛writeup
    陇原战"疫"2021网络安全大赛writeup
    2021第二届“天翼杯”网络安全攻防大赛writeup
  • 原文地址:https://www.cnblogs.com/downmoon/p/1769309.html
Copyright © 2011-2022 走看看