这个例子就是通过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>
<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="/images/member/03.jpg"
id="addjobline" width="12" height="17" /> <img src="/images/member/04.jpg"
id="rmjobline" width="12" height="17" />
Austin Liu 刘恒辉
Project Manager and Software Designer E-Mail:lzhdim@163.com Blog:https://lzhdim.cnblogs.com 欢迎收藏和转载此博客中的博文,但是请注明出处,给笔者一个与大家交流的空间。谢谢大家。 |