Jquery动态生成表单

最新推荐文章于 2024-05-30 13:30:00 发布
最新推荐文章于 2024-05-30 13:30:00 发布
阅读量3.3k 收藏 3
点赞数 1
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flqchl/article/details/48341075
版权

界面初始化，在界面加载的时候使用Ajax发起请求查询数据返回到界面进行初始化。

Aajx发起请求后根据后台返回的JSON类型的结果集动态生成表单并显示结果。

后台返回数据(JSONArray)：

@Controller

@RequestMapping("/chushihua")

public class ZtController{

@RequestMapping("/initPage")

@ResponseBody

public JSONArray initPage(HttpServletRequest request,Model model) throws Exception{

     Sting ny = request.getParameter("ny");

     JSONArray initData = service.getSearchResult(ny);

     return initData;

}

}

前台jsp页面显示：

<body style="padding: 4px">
<div id="root" class="easyui-layout" data-options="fit:true" style="padding:4px">
    <div id="filter" data-options="region:'north',title:'查询条件'" data-bind="show:elements.length>0" style="padding:8px;background-color:#F9F7F4; height:100px" >
     
        <table width="100%" cellpadding="0" cellspacing="4">
            <tr>
     <td class="td_title" align="right">所属年月:</td>
     <td class="td_normal">
      <select name="string(SSND)" id="SSND" style="width:100px"></select>年
      <select name="string(SSYF)" id="SSYF" style="width:100px"></select>月
      <span style="color:red">*</span>
     </td>
     
     <td align="center">
                 <input type="button" id="cx" value="查询" onClick="query()" class="button_normal"/>
                 <input type="button" id="qk" value="清空" onClick="reset()" class="button_normal"/>
                 </td>
   </tr>
        </table>
  
    </div>
    <div id="report" data-options="region:'center'" style="overflow-x: scroll">
  
    <span>单位：万元</span>
    <table id="table" width="100%" border="1" cellspacing="0" cellpadding="0"  bordercolorlight="#cccccc" bordercolordark="#FFFFFF" class="table_main">
    </table>
    </div>
</div>

<script type="text/javascript">
 $(document).ready(function() {
   initconditon();
   init();
    });
   
    function initconditon(){
     var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  initSelectND("SSND", "", "", year); // 四个参数：下拉列表对象名，列表起始年度，列表终止年度（默认为当前年度），初始化年度（默认为当前年度）
  initSelectYF("SSYF",month);
    }
 function init(){
  var SSND = document.getElementById("SSND").value;
  var SSYF = document.getElementById("SSYF").value;
  var ny = SSND

最低0.47元/天 解锁文章
flqchl
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery和layui的form表单自定义js动态生成
03-09
3. jQuery动态生成表单：利用jQuery的append()方法，根据业务需求动态生成表单元素。例如，创建一个输入框和提交按钮。 ```javascript var formData = [ { type: 'text', label: '姓名', name: 'username' }, { ...
jQuery动态生成Bootstrap表格
11-27
标题 "jQuery动态生成Bootstrap表格" 描述的内容是创建一个基于jQuery和Bootstrap的动态表格的示例。这个示例展示了一个简单的JSP页面，用于呈现一个交互式的HTML表格。以下是相关知识点的详细说明： 1. **jQuery**...
JeecgBoot页面Online报表配置(动态)
m0_55841258的博客
08-09 1610
根据登录者角色信息，动态配置报表，查询对应信息。红框展示字段，可以在报表中配置，也可以添加查询条件。
Java实现无代码动态表单系统 JAVA+Vue+SpringBoot+MySQL
customer08的博客
01-16 1298
基于Vue+SpringBoot+MySQL的无代码平台的表单平台，包括了系统数据中心模块，用来存放管理系统通用的模块，另外分别设计了动态类型模块、动态文件模块、动态字段模块和动态值模块这四大模块，用于实现档案管理系统的核心表单逻辑。
很牛的低代码设计器，一个用于设计和生成 Vue.js表单的软件工具，完整规范（带私活源码）
最新发布
m0_68103666的博客
05-30 1004
这是一个用于设计和生成 Vue.js表单的软件工具。它的特点包括：可视化表单设计、自动生成代码、导出JSON表单、内置表单验证、详细的官方文档、扩展组 件支持
jquery实现动态表格项目（表格增加删除/全选/表格变色特效等功能）（附源码+javaWEB开发如果需要可以直接使用）
程序员小王的博客
10-23 1873
jquery实现动态表格项目（表格增加删除/全选/表格变色特效） ???? Java学习路线：搬砖工的Java学习路线 ???? 作者：程序员小王 ???? 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF ???? 扫描主页左侧二维码，加我微信 一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、用jquery实现动态表格相关功能 1、表格自动增加 当前行用户数据 2、表格自动删除 当前行数据 3
jQuery表单动态修改
qq_45739507的博客
04-07 218
jQuery表单动态修改
jQuery完成动态表格
lf1949的博客
03-31 1733
jQuery完成动态表格成果要求代码展示 成果要求 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery/jquery-3.6.0.min.js"></script> <script> $(funct
jquery动态生成文本框，含删除按钮
10-17
本案例聚焦于使用jQuery动态生成文本框，并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景，如在线表单或任务管理器。 首先，`demo.html`和`demo_1.html`是两个不同的示例页面，展示...
jQuery网址提交生成二维码图片
01-14
这个功能允许用户输入网址，然后通过表单提交，系统会动态地根据输入的网址生成对应的二维码图片。 首先，我们需要理解二维码的基本原理。二维码（Quick Response Code）是一种二维条形码，可以存储更多的数据，如...
jQuery动态表单生成图片预览效果适用于生成产品介绍.zip
11-17
在这个“jQuery动态表单生成图片预览效果适用于生成产品介绍”的项目中，我们将探讨如何利用jQuery实现一个功能强大的表单，该表单能够动态生成并预览图片，这对于创建具有吸引力的产品介绍页面尤其有用。...
jQuery动态操作表单示例【基于table表格】
10-17
主要介绍了jQuery动态操作表单,结合实例形式分析了jQuery针对table表格的数据添加、删除、元素修改、提交等相关操作技巧,需要的朋友可以参考下
jQuery动态设置form表单的enctype值(实现代码)
10-27
本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍，需要的朋友参考下
jQuery生成动态表格
Sicimike的博客
04-30 9549
前言 工作中常常需要动态的添加或者删除表格行或者列，所以稍微整理了一下，实现了一些比较通用的功能。 效果 除表头外，第一行模拟从后台加载的数据，其余的行为动态添加 点击保存后，改行自动变成第一行的效果 点击删除时，如果改行未保存，则直接删除；如果改行保存过，则会提示 删除成功后，行号会自动维护 复选框实现了全选、全不选、部分选择的效果 每一行都会有一个固定的ID，和行号不一定相同 源文件 d...
JqueryValidate对动态表单的验证
邢慧鹏的博客
05-05 1658
JqueryValidate 实现动态表单的验证
jQuery之动态为表格添加数据
热门推荐
a1k2l45k的博客
05-19 2万+
项目需求 需要一个页面，包括一张表格，一个button(id=”button1”) button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色 显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面 的表格中 显示框中需要包括一个div,其点击事件是关闭显示框 步骤 HTML结构和CSS美化 ...
jQuery动态创建表单并提交
yunge的博客
08-25 4184
jQuery动态创建表单并提交
jQuery的动态表格动态表单
lzhdim的专栏
02-04 211
这个例子就是通过jquery对dom进行操作，达到动态的实现HTML变换的问题。&#13; &#13; 动态表格动态表单中的Jquery代码&#13; &#13; &lt;script type="text/javascript"&#13; src="/include/jquery/jquery-1.1.3.1.pack.js"&gt;&lt;/script&gt;&#13
JQuery 动态提交form
朝花夕拾
07-16 2001
function exportExcel() { var merchantName = $('#merchantName').val(); var merchantNo = $('#merchantNo').val(); var orderNo = $('#orderNo').val(); var phone = $('#phone'
layui如何动态生成表单
05-13
使用Layui可以通过JavaScript代码动态生成表单。以下是一个示例： ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //动态生成表单项 layui.use('form', function(){ var form = layui.form; var html = '<div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-inline"><input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input"></div></div>'; $('.layui-form').append(html); form.render(); //重新渲染表单 }); </script> ``` 上述代码中，我们使用了Layui的`form`模块来渲染表单，然后使用jQuery的`append()`方法动态添加了一个邮箱输入框。最后使用`form.render()`方法重新渲染表单，使新添加的内容生效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值