欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-20 10:35:07
编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: </tit ......</div> <div class="content"> <p id="demo">编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理</p> <p>记录自己学习做的东西,写的小demo,希望对大家也有帮助!</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMDgvYl8wXzIwMTkxMTA4MTU1NjIwMjczNi5wbmc=" alt="编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理" title="编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理"></p> <p>代码如下:</p> <div class="cnblogs_code"> <pre class="brush: javascript;"><!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></pre> </div> <p> </p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1811082.html"> 机器人要取代人类?至少在这个领域还不行 </a> </p> <p> 下一篇: <a href="/article/1811084.html"> Moto 360 Sport智能手表正式发售 售价2388元 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/1811083.html" target="_blank" title="编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理"> <h2> 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理 </h2> </a> </li> <li> <a href="/article/685217.html" target="_blank" title="编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理"> <h2> 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>