zoukankan html css js c++ java

前台动态添加表格新行将数据返回到后台

前台html 和 javascript 代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .dd
        {
            background-color: Red;
        }
    </style>
    <script type="text/javascript">
        var rowcount = 0;
        var colName = new Array();
        colName[0] = "col0_";
        colName[1] = "col1_";
        colName[2] = "col2_";
        colName[3] = "col3_";

        function AddRow() {
            rowcount++;
            var table = document.getElementById("tb");
            var tr = document.createElement("tr");
            tr.id = "newRow_" + rowcount;
            for (var i = 0; i < colName.length; i++) {
                var td = document.createElement("td");
                td.className = 'dd';
                td.innerHTML = "<input type='text' value='第" + rowcount + "行 第" + (i + 1) + "列" + "' id='" + colName[i] + rowcount + "'/>";
                tr.appendChild(td);
            }
            table.appendChild(tr);

        }

        function RemoveRow() {
            if (rowcount > 0) {
                var table = document.getElementById("tb");
                var tr = document.getElementById("newRow_" + rowcount);
                if (tr) {
                    table.removeChild(tr);
                    rowcount--;
                }
            }
        }

        function GetData() {
            var result = "";
            for (var i = 1; i <= rowcount; i++) {
                for (var j = 0; j < colName.length; j++) {
                    var id = colName[j] + i;
                    var obj = document.getElementById(id);
                    if (obj) {
                        result += obj.value;
                        result += ",";
                    }
                }
                result += "|";
            }
            return result;
        }

        function Get() {
            var ret = GetData();
            alert(ret);
        }

        function transfer() {
            var ret = GetData();
            document.getElementById("Hidden1").value = ret;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset style=" 800px; height: 100%;">
            <legend>动态添加新行</legend>
            <div>
                <input id="Button1" type="button" value="增加新行" onclick="AddRow()" />&nbsp;
                <input id="Button2" type="button" value="删除一行" onclick="RemoveRow()" />
                <input id="Button3" type="button" value="提取内容" onclick="Get()" />
                <input id="Submit1" type="submit" value="传递到后台" onclick="transfer()" />
            </div>
            <table id="tb" border="1" style=" 400px; height: 100%;">
                <tr>
                    <th>
                        列一
                    </th>
                    <th>
                        列二
                    </th>
                    <th>
                        列三
                    </th>
                    <th>
                        列四
                    </th>
                </tr>
            </table>
        </fieldset>
    </div>
    <div id="CodeFile">
        <input id="Hidden1" type="hidden" runat="server" />
    </div>
    </form>
</body>
</html>

后台代码

protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack)
        {
            string val = this.Hidden1.Value;
            this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "", string.Format("<script>alert('{0}')</script>",val));
        }
    }

实例效果：

查看全文

相关阅读:
convert image to base64 and post to RESTful wcf
在android webview实现截屏的手动tounchmove裁剪图片
 How to use jquery ajax and android request security RESTful WCF
using swfUpload in asp.net mvc
using HttpClient and sending json data to RESTful server in adroind
ODP.NET数据访问
 android image watermark
解决国内不能访问github的问题
 idapro权威指南第二版阅读笔记第九章交叉引用和绘图功能
 idapro权威指南第二版阅读笔记第二章逆向和反汇编工具

原文地址：https://www.cnblogs.com/net-study/p/3598662.html