jQuery的动态表格动态表单

简介: 这个例子就是通过jquery对dom进行操作,达到动态的实现HTML变换的问题。 动态表格动态表单中的Jquery代码 ("#addjobline").css("cursor","pointer");("#rmjobline").

这个例子就是通过jquery对dom进行操作,达到动态的实现HTML变换的问题。

动态表格动态表单中的Jquery代码

<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<script language="javascript">
$("#addjobline").css("cursor","pointer");
$("#rmjobline").css("cursor","pointer");
$("#addjobline").click( function() {
jobline+=1;
$("#jobline").val(jobline);
var str="";
str+='<tr id="jobline'+jobline+'">'
str+='<td><input type="text" name="brq'+jobline+'"></td>'
str+='<td><input type="text" name="erq'+jobline+'"></td>'
str+='<td><input type="text" name="school'+jobline+'"></td>'
str+='<td><input type="text" name="spe'+jobline+'"></td>'
str+='</tr>';
$("#job").append(str);
} );
$("#rmjobline").click( function() {
$("#jobline"+jobline).remove();
jobline-=1;
$("#jobline").val(jobline);
} );
</script>

jQuery的下面是动态表格动态表单中的HTML代码
<script>var jobline=1;</script>
<input type="hidden" name="jobline" id="jobline" value="1">
<table width="462" border="0" cellspacing="3" cellpadding="0">
        <tr>
          <td width="88" class="td1">开始日期</td>
          <td width="88" class="td1">结束日期</td>
          <td width="117" class="td1">单位名称</td>
          <td width="115" class="td1">岗位名称</td>
        </tr>
       <tbody id="job">
        <tr id="jobline1">
          <td><input type="hidden" name="jid1"><input type="text" name="brq1" ></td>
          <td><input type="text" name="erq1"></td>
          <td><input type="text" name="school1"></td>
          <td><input type="text" name="spe1"></td>
        </tr>
       </tbody>
</table>
<img src="https://images.cnblogs.com/member/03.jpg" id="addjobline" width="12" height="17" /> <img src="https://images.cnblogs.com/member/04.jpg" id="rmjobline" width="12" height="17" />

目录
打赏
0
0
0
0
16
分享
相关文章
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
86 0
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
60 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
415 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
9月前
|
jQuery及highcharts做cpu动态走势图
jQuery及highcharts做cpu动态走势图
76 1
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
55 4
jQuery会员中心安全修改表单特效
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
96 0
jQuery动态拼接多张图片并且获取每张图片名称
jQuery动态拼接多张图片并且获取每张图片名称
74 1
jQuery动态增加一行元素和删除一行元素
jQuery动态增加一行元素和删除一行元素
41 0
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
68 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等