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

简介: 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理记录自己学习做的东西,写的小demo,希望对大家也有帮助!
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步~
编辑表格输入内容、根据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>
目录
相关文章
|
4月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
40 2
|
4月前
打印表格图片发黑,如何处理
打印表格图片发黑,如何处理
52 1
|
4月前
|
前端开发
使用thymeleaf将查询的数据显示在前台。通过使用循环的形式
这篇文章介绍了如何使用Thymeleaf的`th:each`属性在前端页面上循环显示从后端传递过来的列表数据,并通过具体的HTML表格示例展示了如何展示书籍名称、作者、价格、出版社以及操作链接。
|
7月前
解决设置了标签的最大行数,更新标签的内容为富文本内容,导致超过最大行数不显示...问题
解决设置了标签的最大行数,更新标签的内容为富文本内容,导致超过最大行数不显示...问题
34 0
|
7月前
|
iOS开发
表单输入绑定 基本用法
表单输入绑定 基本用法
|
7月前
layui根据数据状态判断显示内容
layui根据数据状态判断显示内容
230 0
|
7月前
uniapp里textarea多行文本输入限制数量
uniapp里textarea多行文本输入限制数量
(模拟菜单选择实现)## 存入你的基本信息,在zhangsan.txt文件中## 显示你的基本信息## 统计zhangsan.txt含有good的文本数
(模拟菜单选择实现)## 存入你的基本信息,在zhangsan.txt文件中## 显示你的基本信息## 统计zhangsan.txt含有good的文本数
107 0
|
JavaScript
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
输入超过规定长度error提醒,并实时显示输入长度,可无限输入
1052 0
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
|
移动开发 Python
批量查找文本中的内容
@echo off findstr /ims "查找内容" *.*>list.txtps:把含有相关文字内容的文档输出到list.txt文本中,适用于能用notepad打开的各种文档.   是一个修改升级的版本,原程序是这个《批量查找替换文本文件内容》。
1060 0