編輯表格輸入內容、根據input輸入框輸入數字動態生成表格行數、編輯表格內容提交傳給後臺數據處理

来源:https://www.cnblogs.com/vaelcy/archive/2019/11/08/11819086.html

編輯表格輸入內容、根據input輸入框輸入數字動態生成表格行數、編輯表格內容提交傳給後臺數據處理 記錄自己學習做的東西,寫的小demo,希望對大家也有幫助! 代碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit ...


編輯表格輸入內容、根據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>

 


您的分享是我們最大的動力!

更多相關文章
  • 題目描述 實現函數 makeClosures,調用之後滿足如下條件:1、返回一個函數數組 result,長度與 arr 相同2、運行 result 中第 i 個函數,即 result[i](),結果與 fn(arr[i]) 相同 示例1 1 //參考《JavaScript高級程式設計》的典型方法 2 ...
  • 眾所周知,在組件式開發中,最大的痛點就在於組件之間的通信。在 Vue 中,Vue 提供了各種各樣的組件通信方式,從基礎的 props/$emit 到用於兄弟組件通信的 EventBus,再到用於全局數據管理的 Vuex。 在這麼多的組件通信方式中,provide/inject 顯得十分阿卡林(毫無存 ...
  • var myDate = new Date();Date.now(); // 獲取當前時間 1573200670754 時間戳精確到毫秒 myDate.getYear(); //獲取當前年份(2位) myDate.getFullYear(); //獲取完整的年份(4位,2017) myDate.ge ...
  • 本節說一下DOM操作模塊里的刪除元素模塊,該模塊用於刪除DOM里的某個節點,也可以理解為將該節點從DOM樹中卸載掉,如果該節點有綁定事件,我們可以選擇保留或刪除這些事件,刪除元素的介面有如下三個: empty() ;移除匹配元素的所有子元素。 ;先移除所有後代元素關聯的數據和事件,以避免記憶體泄漏。然 ...
  • CSS的引入 在早期,如果要去定義一個H1的標題的顏色、字體、大小和其他的顯示特征,就需要用到HTML中的font或其他樣式的指令,H1只是一個結構指令所以光有它是不夠的。因此如果有多個標簽要去進行處理,就會造成樣式的重覆,後期維護的困難。 那CSS的出現就解決了這一類的問題,CSS(Cascadi ...
一周排行
  • 1. 運行效果 在 "使用GetAlphaMask和ContainerVisual製作長陰影(Long Shadow)" 這篇文章里我介紹了一個包含長陰影的番茄鐘,這個番茄鐘在狀態切換時用到了翻轉動畫,效果如上所示,還用到了彈簧動畫,可以看到翻轉後有點回彈。本來打算自己這個動畫效果寫的,但火火已經寫 ...
  • 接上一篇,es部署很簡單,很快就弄好了。 但是還是有很多不玩美。 比如說:主機是本地的IP或機器名,埠是固定的9200. 而且是只有一個節點,我要在一臺機器上部署多個節點呢。 經過一段時間的摸索,做起來也很簡單,但過程切實很痛苦。 具體做法是:你想部署多少個節點,你就重覆多少次上一步的做法。啟動就 ...
  • 在項目中,需要為所有的Button、TextBox設置一個預設的全局樣式,一個個的為多個控制項設置相同的樣式顯然是不明智的。在WPF中可以通過資源設置全局樣式,主要有倆種方法: 1.第一種就是先寫好按鈕的樣式,不寫Key,然後在App.xaml中引用。 <ResourceDictionary xmln ...
  • 說明:該篇隨筆的代碼內容並非出自本人,是在其他網站搜尋的,出處已經不記得了,本次隨筆只為記錄,目的幫助自己,幫助他人。 實現的原理也不做多的贅述,直接上代碼。 第一個類是需要用到的Windows API public class Win32Api { [StructLayout(LayoutKind ...
  • 前言 在ASP.Net Core2.X調用的CreateWebHostBuilder和3.X的主要區別在於WebHost的調用,CreateDefaultBuilder被Host替換,另一個區別是對ConfigureWebHostDefaults()的調用; 由於新的主機生成器是通用主機生成器,因此 ...
  • 對於開發人員來說,常常需要在不藉助任何Microsoft Office及其他第三方軟體的情況下,打開、創建、修改、轉換、列印、瀏覽(Word、Excel、PowerPoint和PDF等)文檔,以及將數據從數據源轉換為常用的文檔格式,甚至一些其他的文檔操作。 在這裡,小編調查了業內許多開發人員,為大家 ...
  • 這次的目標是實現通過標註Attribute實現緩存的功能,精簡代碼,減少緩存的代碼侵入業務代碼。 緩存內容即為Service查詢彙總的內容,不做其他高大上的功能,提升短時間多次查詢的響應速度,適當減輕資料庫壓力。 在做之前,也去看了EasyCaching的源碼,這次的想法也是源於這裡,AOP的方式讓 ...
  • 例如想獲取尾碼名為.txt的文件 第一種方法獲取到的是對應的文件路徑 第二種方法可以獲取到文件的一些詳細信息 類似於"*.txt" 要與路徑中的文件名匹配的搜索字元串。這個參數可以包含有效的文本路徑和通配符(*和?)的組合人物,但它不支持正則表達式。 我是參照此路徑編寫的博客,用於自己查詢快速 ht ...
  • 我們在開發中Json傳輸數據日益普遍,有很多關於Json字元串的序列化和反序列化的文章大多都告訴你怎麼用,但是卻不會告訴你用什麼更高效。因為有太多選擇,人們往往會陷入選擇難題。 相比.NET Framework有三種選擇而.net core下已經沒有JavaScriptSerializer,但是大家 ...
  • c#微信公眾號開發 基本設置 參考微信官方文檔 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html 開發→基本配置 公眾號開發信息 註:1.記錄好開發者密碼,會在程式中驗證過程 ...
x