利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据库

Html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/Jquery1.7.js"></script>
    <script src="js/MyAdd.js"></script>
    <link href="css/MyPages.css" rel="stylesheet" />
</head>
<body>
    <div >
        <div id="divInsert">
            <div id="divBtn">
                <input id="btnDelete" type="button" value="删除行" />
                <input id="btnData" type="button" value="插入行" />
                <input id="btnInsert" type="button" value="添加行" />
            </div>
        </div>
        <table id="tab" cellpadding="0" cellspacing="0">
            <tr>
                <td rowspan="2">姓名</td>
                <td rowspan="2">年龄</td>
                <td colspan="2">血压</td>
            </tr>
            <tr>
                <td>高压</td>
                <td>低压</td>
            </tr>
        </table>
    </div>
    <div id="mydiv"></div>
</body>
</html>

JS文档

/// <reference path="../WebService1.asmx" />
/// <reference path="../WebService1.asmx" />
$(function () {
    //定义一个全局变量i,用来标识添加了几行
    var row = 0;
    var strValue = "";
    //将一行添加到table中去
    $('#btnInsert').click(function () {
        row++;
        //字符串拼接tr一行中的内容
        var tr = "<tr>";
        for (var i = 0; i < 3; i++) {
            tr += "<td><input id='" + row + "text'" + i + "+' type='text' value=" + row +""+ i + " /></td>";
        }
        tr += "<td><input class='txt' id='" + i + "text4'+ type='text' value=" + row + "" + 4 + " /><input id='Checkbox1' class='ck' name='ckb' type='checkbox' /> </td></tr>";
        $("#tab").append(tr);
    })
    //删除添加的行，先判断checkbox是否选中，然后删除
    $('#btnDelete').click(function () {
        $("input[name=ckb]:checked").each(function () { $(this).parent().parent().remove(); });
    })
    //将i遍历，判断是否存有值，如果有将数据插入数据库
    $('#btnData').click(function () {
        $('table input').each(function () {
            strValue += $(this).val() + ",";
        })
        $.ajax({
            type: 'post',
            contentType: 'application/json',
            url: "../WebService1.asmx/InsertInfo",
            data: "{valuesStr:'" + strValue + "'}",
            success: function (result) {
                $('#mydiv').html(result.d);
            }
        })
    })
})

 

CSS文档
table tr td{border:1px solid #eee;text-align:center;width:80px;}
#divInsert{width:100%;height:25px;}
#btnInsert{width:50px;height:25px;background-color:#eee;border-style:none;position:absolute;left:185px;}
#btnData{width:50px;height:25px;background-color:#eee;border-style:none;position:absolute;left:235px;}
#btnDelete{width:50px;height:25px;background-color:#eee;border-style:none;position:absolute;left:285px;}
input{width:70px;}
.txt{width:35px;float:left;position:relative;left:5px;}

.ck{width:10px;float:right;}

PersonInfo类文件

namespace ASPOilfiled
{
    public class PersonInfo
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public int Hblood { get; set; }
        public int Lblood { get; set; }
    }
}

WebService1.asmx 文件

[System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        public static string sqlstr = ConfigurationManager.ConnectionStrings["sqlstr"].ConnectionString;
        [WebMethod]
        public string InsertInfo(string valuesStr)
        {
            string result = "插入失败！";
            string asd = valuesStr.Replace("on,", "");
            string[] str2 = System.Text.RegularExpressions.Regex.Split(asd, ",");
            //for (int i = 0; i < str2.Length; i++)
            //{
            //    result += str2[i] + "<br/>";
            //}
            for (int i = 0; i < str2.Length; i++)
            {
                PersonInfo info;
                if (i % 4 == 0)
                {
                    info = new PersonInfo();
                    info.Name = str2[i];
                    info.Age = Convert.ToInt32(str2[i + 1]);
                    info.Hblood = Convert.ToInt32(str2[i + 2]);
                    info.Lblood = Convert.ToInt32(str2[i + 3]);
                    result = InfoToSql(info).ToString();
                }
            }
            return result;
        }
        public int InfoToSql(PersonInfo info)
        {
            string instSql = "insert into PersonInfo values(@name,@age,@Hblood,@Lblood)";
            SqlConnection con = new SqlConnection(sqlstr);
            con.Open();
            SqlCommand cmd = con.CreateCommand();
            cmd.CommandText = instSql;
            cmd.Parameters.Add("@name", SqlDbType.VarChar, 32).Value = info.Name;
            cmd.Parameters.Add("@age", SqlDbType.Int).Value = info.Age;
            cmd.Parameters.Add("@Hblood", SqlDbType.Int).Value = info.Hblood;
            cmd.Parameters.Add("@Lblood", SqlDbType.Int).Value = info.Lblood;
            int i = cmd.ExecuteNonQuery();
            cmd.Dispose();
            con.Dispose();
            return i;
        }
    }

Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库的更多相关文章

  1. v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  2. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  3. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  4. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  5. Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)

    自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...

  6. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  7. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  8. JavaWeb -- Struts1 使用示例： 表单校验 防表单重复提交 表单数据封装到实体

    1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...

  9. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

随机推荐

  1. HDU5627--Clarke and MST （bfs+位运算）

    http://www.cnblogs.com/wenruo/p/5188495.html Clarke and MST Time Limit: 2000/1000 MS (Java/Others) M ...

  2. SQL2005以上行变行简单实现

    用语法PIVOT参照:http://technet.microsoft.com/zh-cn/library/ms177410(v=sql.105).aspx

  3. 【三支火把】---C语言面试问题总结

    看了一份关于HR在面试一名C程序员可能提问的问题手册,学到了很多,很多都是一些琐碎的知识点,总是你写过很多大型的C程序,但是我敢说,里面也有你没掌握的东西. 1.全局变量和局部变量有何区别? 答:全局 ...

  4. SQLite 入门教程（一）基本控制台（终端）命令 （转）

    转于: SQLite 入门教程(一)基本控制台(终端)命令 一.基本简介   SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所 ...

  5. 在.net Core 中像以前那样的使用HttpContext.Current

    今晚在学习.net Core 的使用 拿来以前项目进行改造最简单的问题就是怎么做到让httpcontext 和以前兼容 ,折腾的很久 终于搞定,纪录一下 .net core中使用了无处不在的注入,看了 ...

  6. 通过wifi调试Android程序

    原文:http://www.cnblogs.com/sunzhenxing19860608/archive/2011/07/14/2106492.html 1.首先让android手机监听指定的端口: ...

  7. 超详细单机版搭建hadoop环境图文解析

    前言: 年前,在老大的号召下,我们纠集了一帮人搞起了hadoop,并为其取了个响亮的口号“云在手,跟我走”.大家几乎从零开始,中途不知遇到多少问题,但终 于在回家之前搭起了一个拥有12台服务器的集群, ...

  8. Geogebra里给带有曲线和直线混合边界的封闭区域填充颜色

    目的 用Geogebra绘制如图所看到的曲线,并填充如图边界的区域为实心: 用代码实现当然是能够的,可是,图形过于简单的时候用代码就不经济了.由于每个细小变动都还要调整改动代码并预览,非所见即所得.往 ...

  9. careercup-递归和动态规划 9.2

    9.2 设想有个机器人坐在X*Y网格的左上角,只能向右.向下移动.机器人从(0,0)到(X,Y)有多少种走法? 进阶: 假设有些点为“禁区”,机器人不能踏足.设计一种算法,找到一条路径,让机器人从左上 ...

  10. 如何从零开始学习DIV+CSS

    CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...