利用jQuery制作提交表单生成表格的案例

女爷i 2022-04-17 04:23 294阅读 0赞

# 做个简单的提交表单生成表格 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]

<body>
    编号:<input type="text" name="bookNo"><br>
    书名:<input type="text" name="bookName"><br>
    作者:<input type="text" name="author"><br>
    出版社:<input type="text" name="press"><br>
    <input type="button" value="添加" id="bn">
    查找:<input type="text" id="search">
    <input type="button" value="查找" id="searchBn">
    <input type="button" value=:"清除" id="clear">
    </body>

##### 首先我们要构思案例的思路,有条理的书写会让我们避免出现更多的bug; #####

1.  当点击添加按钮是,获取表单的数据,并且存入arr;
2.  根据数组创建表格;
3.  根据search文本的内容在数组中模糊查找数据,查找的的数据存入新的数组中,并且通过这个数组创建表格;
4.  清除新数组创建的表格,重新根据原数组创建表格;

<script> var arr=[]; var button=[]; var table=$("<table></table>").css("borderCollapse","collapse").width(800).appendTo("bady"); $("#bn").on("click",function(e){ var obj={ }; var bool=false; $(":text:not(#search)").each(function(index,item){ var str=$(item).attr("name"); if($(item).val().trim().length===0){ bool=true; } obj[str]=$(item).val(); }); if(bool){ alert("输入的内容有误!"); return; } obj.deleted=false; arr.push(obj); createTable(arr); }); $("#clear").on("click",function(){ buDispose(); table.empty(); arr=[]; }) function bnDispose(){ for (var i=0;i<buttons.length;i++;){ button[i].off("click"); button[i]=null; } buttons.length=0; }; function createTable(arr){ bnDispose(); table.empty(); if(!arr || arr.length===0) return; var style={ height="30px", lineheight="30px", textalign="center", border="1px solid #000" }; var thr=$("<tr></tr>").appendTo(table); $.each(arr[0],function(prop,value){ $("<th></th>").text(prop).appendTo(thr).css(style); }); $.each(item,function(prop,value){ var td=$("<td></td>").css(style).appendTo(td).on("click",function(e){ if(prop==="deleted"){ var bn=$("<button>删除</button>").appendTo(td).on("click",function(e){ var tr=$(this).parent().parent()[0]; var trs=Array.from($("tr")); var index=trs.indexOf(tr); arr.splice(index-1,1); createTable(arr); }); buttons.push(bn); }else{ td.text(value); }; }) }); } </script>

> 看人这么少,我就先不写注释了;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]: /images/20220417/9a0d579235be46899530704f49ce6cbc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，294人围观）

还没有评论，来说两句吧...

相关阅读

相关提交表单与验证表单案例

提交表单与验证表单案例学习路线：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][JavaScript

悠悠/ 2024年03月31日 13:34/ 0 赞/ 73 阅读

相关 Form表单利用Jquery Validate验证以及ajax提交

＃表单利用Jquery验证验证以及ajax提交 -------------------- \\概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程，以及Va

电玩女神/ 2023年10月16日 23:02/ 0 赞/ 122 阅读

相关 jQuery提交form表单

<form id="search_form" name="search_form" method="post"> <input type="tex

「爱情、让人受尽委屈。」/ 2022年08月02日 09:44/ 0 赞/ 324 阅读

相关 springMVC数据传递案例------利用form表单提交数据

这一章简单的例举一下form表单是怎么讲数据传递到后台，又是怎么接收，再传回来运行用的框架是之前搭建的，已经导出来了，有兴趣的可以直接去下载 [ssm框架][ss

怼烎@/ 2022年06月08日 03:13/ 0 赞/ 188 阅读

相关用Jquery提交表单

java代码 <form id="form1"> 用户名：<input type="text" name="username" />

Myth丶恋晨/ 2022年06月03日 04:49/ 0 赞/ 212 阅读

相关 jQuery控制表单提交

JQuery 提交表单代码 1、表单 `html` <form action="路径" method="post" id="myFormId">

怼烎@/ 2022年05月20日 09:55/ 0 赞/ 208 阅读

相关 JQuery AJAX 的表单提交

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。 jQuery Form 有两个核心的方法--aja

傷城~/ 2022年05月20日 03:34/ 0 赞/ 392 阅读

相关 Jquery 提交表单

jquery 序列化表单提交：前端js： $("okBtn").click(function () { $("okBtn").a

深碍√TFBOYSˉ_/ 2022年05月18日 09:06/ 0 赞/ 312 阅读

相关利用jQuery制作提交表单生成表格的案例

做个简单的提交表单生成表格 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

女爷i/ 2022年04月17日 04:23/ 0 赞/ 295 阅读

相关 jQuery 异步提交表单

这个以前学过,但是后来工作用多了 MXFramework 的 RESTClient 做交互有些淡忘了虽然 RESTClient跟 ajax 差不太多,但还有区别今天复

小灰灰/ 2022年04月06日 07:45/ 0 赞/ 317 阅读