jQuery的动态表格动态表单

这个例子就是通过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" />

时间: 2024-10-05 23:01:12

jQuery的动态表格动态表单的相关文章

Extjs读取xml文件生成动态表格和表单

最近开发项目,需要动态读取xml文件,生成Extjs界面,xml文件通过前台页面的按钮事件传进来,可以在网上查找[javascript 弹出子窗口]的相关文章</a> 获取弹出窗口url后的参数方法: // 获取url后的参数值 function getQueryStringValue(name) { var url = window.location.search; if (url.indexOf('?') < 0) { return null } var index = url.in

Extjs读取xml文件生成动态表格和表单(续)

很多人向我要[Extjs读取xml文件生成动态表格和表单]一文的源代码,故花了些时间将源代码整理出来,并重新编写此文,分享当时的技术思路. 需要的文件有: 1.html文件,此处以SASC.search.MtrUse.html为例 2.Extjs相关文件,见SASC.search.MtrUse.html文件中的引用 3.工具类,DomUtils.js 4.核心js类:SASC.extjs.search.MtrUse.js 5.java代码 详细html和js代码见相关文件,这里先描述思路. 首先

jQuery动态设置form表单的enctype值(实现代码

本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍,需要的朋友参考下   代码简单, 注意2个地方enctype和encoding 复制代码 代码如下: $("#form").attr("enctype", "multipart/form-data");             $("#form").attr("encoding", "multipar

如何解决jQuery Validation针对动态添加的表单无法工作的问题?

为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案.我们知道ASP.NET MVC默认集成了jQuery Validation,但是对于通过JavaScript动态添加的表单,客户端验证默认情况下是失效的. 还是以前文涉及的"联系人管理"为例,在一个ASP.NET MVC应用中定义了如下两个类型,Contact封装联系人信息,HomeCo

JavaScript动态创建form表单并提交的实现方法_javascript技巧

本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

动态设置form表单的action属性的值的简单方法_jquery

用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at

jQuery实现html表格动态添加新行的方法

  本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict

jQuery实现html表格动态添加新行的方法_jquery

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

JQuery打造PHP的AJAX表单提交实例_jquery

如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源.如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章<使用PHPMailer类库发送电子邮件>. 第一步,创建一个表单HTML页面 这里,我们只展示主要的表单部分HTML结构代码: 复制代码 代码如下: <div id="contact_form"> <form name="contact" method="post" action="