This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

During the learning process, I will share my notes with you. I hope it will be helpful for you to grow and progress together

Edit the input content of the table, dynamically generate the number of table rows according to the input numbers in the input box, edit the table content and submit it to the background data processing

Record their own learning to do things, write small demo, hope to everyone also helpful!

The code is as follows:

<! DOCTYPEhtml>
<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>Building no. :</label><input name="" type="text" class="louhao">
        <label>Unit number:</label><input type="text" id="myInput" oninput="myFunction()">
        <form id="submitForm">
            <table class="table table-bordered">
                <thead class="aa">
                    <tr>
                        <th>unit</th>
                        <th>Begin to floor</th>
                        <th>The end of the floor</th>
                        <th>Number of each level</th>
                    </tr>
                </thead>
                <tbody class="units">
                </tbody>
            </table>
        </form>
    </body>
    <button class="btn">submit</button>
    <script>
        function myFunction() {
            var x = $("#myInput").val();
            $("#demo").text("You typed in:" + 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("&"); // Partition by ampersand (&) to get an array of key=value
            var t = false;
            for(var i = 0; i < msg2.length; i++) {
                var msg3 = msg2[i].split("="); // Then split by "=" to get an array of keys and values
                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) {// Indicates whether the last column of the current row is reached
                            json += "{";
                        }
                        t = false;
                    }
                    if(msg3[j] == "inp3") { // Where "inp3" is the name value of the input tag for the last column of your table, indicating whether the last input of the current row is reached
                        t = true; }}if(! msg2[i].match("inp3")) { / / same as above
                    json += ";";
                }
            }
            json += "]";
            console.log(json)
            / / final values were converted to MSG: [{" key ":" value ", "key" : "value"}, {" key ":" value ", "key" : "value"}] format the json data < br >
        })
    </script>
</html>
Copy the code