编辑表格输入内容、根据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>

原文地址:https://www.cnblogs.com/vaelcy/p/11819086.html

时间: 2024-10-13 17:26:24

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

javascript如何生成指定行数的表格

javascript如何生成指定行数的表格:使用javascript可以动态生成一个表格,但是有些时候需要根据需要生成指定行数的表格,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>动态生成表格代码</title> <style type="text/css"&g

web开发学习笔记(4):js获取table的行数和表格中某一行某一列的内容

table的id="tab" 一.获取table的行数 var count=document.getElementById("tab").rows.length; 二.获取第i行第j列的内容(方式不止三种,根据实际情况选择,比较推荐方式一) 方式一: <pre name="code" class="html"><strong>var title=tab.rows[i].cells[j].children

input输入框输入文字出现清空文字按钮

$("#J_UserName").keyup(function(){ if($("#J_UserName").val() == "" || $("#J_UserName").val() == null){ $("#J_clean").hide(); }else{ $("#J_clean").show(); } }); $("#J_clean").click(funct

Linux截取文件指定行数之间的内容

如果你只想看文件的前100行,可以使用head命令,如head -100 ?filename 如果你想查看文件的后100行,可以使用tail命令,如:tail -100 ?filename 或 tail -n 100 ?filename 查看文件中间一段,你可以使用sed命令,如:sed -n '100,200p' filename?这样你就可以只查看文件的第100行到第200行. 截取的文件可以用重定向输入到新的文件中:head -100 ?filename >a.txt 原文地址:https

jquery 读取页面表格中的数据 生成批量insert代码 并以ajax方式传给后台

表格的格式较为常规,首行为字段,以下各行为数据,表格的id为detailList . $("#submitExcel").click(function(){ //绑定单击事件 insertStr="insert into funddetail values"; // insert字符串的初始值 $("#detailList tr:gt(0)").each(function(i){ //获取表格除首行外的所有行,并给每一行添加方法 insertSt

input输入框联想功能

一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的问题.还是直接上代码吧. 首先是一个简单的界面 auto.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

JS实现动态生成表格并向后端提交表格数据(一)

前段时间开发了一些web应用,其中就有涉及到动态的表格问题,因为很久没有写web前端了,所以在网上找了一些资料,发现很零碎,于是自己就根据找到的资料写了这么一个小功能,主要是供自己记忆,如果能帮到你很荣幸,如果你有更好的方法,也可以相互讨论,相互学习一下. 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. 1 <script src="../js

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json

原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格 <table border="0" style="text-align: center;" width="100%" id="myTable">

js动态生成表格

下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 1 <table> 2 <tr> 3 <td>动态生成表格</td> 4 <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td>