编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

记录自己学习做的东西，写的小demo，希望对大家也有帮助！

代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <link rel="stylesheet" href="../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

    <script type="text/javascript" src="../../js/jquery-1.12.1.min.js"></script>

    <script type="text/javascript" src="../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        table thead tr th {

            border-bottom: 0 !important;

        }

        .table {

            margin-top: 20px;

            width: 80%;

            margin-left: 20px;

        }

        table tr,

        th,

        td {

            text-align: center;

        }

        .tdpadding {

            padding: 0 !important;

        }

        .table_input {

            width: 100%;

            height: 37px;

            border: none;

        }

    </style>

    <body>

        <p id="demo"></p>

        <label>楼号:</label><input name="" type="text" class="louhao">

        <label>单元数:</label><input type="text" id="myInput" oninput="myFunction()">

        <form id="submitForm">

            <table class="table table-bordered">

                <thead class="aa">

                    <tr>

                        <th>单元</th>

                        <th>开始楼层</th>

                        <th>结束楼层</th>

                        <th>每层次数</th>

                    </tr>

                </thead>

                <tbody class="units">

                </tbody>

            </table>

        </form>

    </body>

    <button class="btn">提交</button>

    <script>

        function myFunction() {

            var x = $("#myInput").val();

            $("#demo").text("你输入的是: " + x);

            $(".units").html("");

            var str = ""

            for(var i = 0; i < x; i++) {

                str += "<tr><td class='tdpadding'><input name='inp0' value='" + (i + 1) + "' type='text' readonly='readonly' class='table_input desa'></td><td class='tdpadding'><input name='inp1' value='' type='text' class='table_input'></td><td class='tdpadding'><input name='inp2' value='' type='text' class='table_input'></td><td class='tdpadding'><input name='inp3' value='' type='text' type='text' class='table_input'></td></tr>"

            }

            $(".units").append(str)

        }

        $(".btn").click(function() {

            var louhao = $(".louhao").val()

            console.log(louhao)

            var msg = $("#submitForm").serialize();

            var json = "[{";

            var msg2 = msg.split("&"); //先以“&”符号进行分割，得到一个key=value形式的数组

            var t = false;

            for(var i = 0; i < msg2.length; i++) {

                var msg3 = msg2[i].split("="); //再以“=”进行分割，得到key，value形式的数组

                for(var j = 0; j < msg3.length; j++) {

                    json += "\"" + msg3[j] + "\"";

                    if(j + 1 != msg3.length) {

                        json += ":";

                    }

                    if(t) {

                        json += "}";

                        if(i + 1 != msg2.length) { //表示是否到了当前行的最后一列

                            json += ",{";

                        }

                        t = false;

                    }

                    if(msg3[j] == "inp3") { //这里的“inp3”是你的表格的最后一列的input标签的name值，表示是否到了当前行的最后一个input

                        t = true;

                    }

                }

                if(!msg2[i].match("inp3")) { //同上

                    json += ";";

                }

            }

            json += "]";

            console.log(json)

            //最终msg的值就被转换为：[{"key":"value"；"key":"value"},{"key":"value"；"key":"value"}]格式的json数据<br>

        })

    </script>

</html>

编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理的更多相关文章

  1. 项目小结：手机邮箱正则，URL各种判断返回页面，input输入框输入符合却获取不到问题

    1.手机邮箱正则 近两年出来很多新号码,听说199什么的都有了- -导致以前的正则不能用了....这就很难过,总是过一段时间出一种新号码.因此,我决定使用返朴归真的手机正则. 手机正则:var reg ...

  2. input输入框输入小写字母自动转换成大写字母

    input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件,即时把字母转换为大写字母: html里input加上 <input type="text&qu ...

  3. input输入框输入大小写字母自动转换

    input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件,即时把字母转换为大写字母: html里input加上 <input type="text&qu ...

  4. Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？

    转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...

  5. HTML中限制input 输入框输入内容

    限制 input 输入框只能输入纯数字1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是 ...

  6. Input输入框输入银行卡号自动空格

    input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~  如果是这样,会不会好很多呢~~ 其实逻 ...

  7. input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"

    项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop  :rules ref这三个属性 2.利用oninput时间进行校验   ...

  8. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  9. iTextSharp动态生成多页pdf及追加内容等记录

    1.要动态生成pdf,无非是用第三方或直接代码生成. 2.iTextSharp生成pdf问题点记录 dll相关下载 https://files.cnblogs.com/files/xlgwr/iTex ...

随机推荐

  1. dubbo连接过程

    场景1 启动时 dubbo服务提供端在Zookeeper上注册的节点目录:假设接口名称是:com.bob.dubbo.service.CityDubboService dubbo服务提供端连接到注册中 ...

  2. C#实体类null自动转空字符串

    C#实体类null自动转空字符串 using System.ComponentModel.DataAnnotations; [DisplayFormat(ConvertEmptyStringToNul ...

  3. flutter upgrade之后出现Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from

    错误信息 Initializing gradle... Resolving dependencies... Running Gradle task 'assembleDebug'... /Users/ ...

  4. 转：webpack代码压缩优化

    压缩代码 18 天前30前端开发 压缩 JavaScript 修改 JavaScript 压缩处理器 其他压缩 JavaScript 的方法 加快 JavaScript 执行速度 作用域提升 预执行 ...

  5. Linux下tar的安装方式

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  6. ros 源码安装

    版本lunar, 系统版本debian 9.8 参考: http://wiki.ros.org/lunar/Installation/Source 1. Installing bootstrap de ...

  7. windows mysql手动添加my.ini 服务启动不了

    [mysqld] character-set-server=utf8 #绑定IPv4和3306端口 bind-address=0.0.0.0 port= default_storage_engine= ...

  8. fidder配置 https设置 手机客户端

    1.APP抓包时的手机代理设置: 让手机和PC在同一个局域网下面: 1.如果PC是笔记本,让iOS或Android手机.iPhone或笔记本它们连接同一个wifi网络即可(自己试了不行,未找到原因). ...

  9. Java之字符和字符串

    字符类型 字符类型char是基本数据类型,它是character的缩写.一个char保存一个Unicode字符: char c1='A'; char c2='中'; 因为Java在内存中总是使用Uni ...

  10. 恋恋山城 Jean de Florette (1986) 男人的野心 / 弗洛莱特的若望 / 让·德·弗罗莱特 / 水源 下一部 甘泉，玛侬

    <让·德·弗洛莱特>电影剧本 文/[法]马赛尔·巴涅尔译/苏原 编者按:<让·德·弗洛莱特>和<甘泉,玛侬>是根据法国著名作家马赛尔·巴涅尔的同名小说改编的电影.马 ...