最近项目中会经常应用到jQuery,配合具体案例,简单介绍一下jQuery之div内容添加、取消及相关内容替换等应用技巧。
案例:添加院校信息,并同时添加分校信息(存在分校时,可以添加,并且可以添加多个,填写错误可以取消,并可以对添加分校名自动编号1,2,3...)
首先将jquery.js文件引入,<script type="text/javascript" src="./jquery.js" ></script>.
//院校信息添加
<table>
<tr>
<td align="right">培训机构名:</td>
<td><input type="text" name="school_name" /></td>
</tr>
<tr>
<td align="right">培训科目:</td>
<td><input type="text" name="school_subject" /></td>
</tr>
<tr>
<td align="right">培训对象:</td>
<td><input type="text" name="school_trainee" /></td>
</tr>
<tr>
<td align="right">地 区:</td>
<td><input type="text" name="area" /></td>
</tr>
<tr>
<td align="right">地 址:</td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td align="right">交通情况:</td>
<td><input type="text" name="traffic" /></td>
</tr>
<tr>
<td align="right">联系人:</td>
<td><input type="text" name="linkman" /></td>
</tr>
<tr>
<td align="right">联系方式:</td>
<td><input type="text" name="contact" /></td>
</tr>
<tr>
<td align="right">营业执照:</td>
<td><input type="file" name="license" /></td>
</tr>
<tr>
<td align="right">校区介绍:</td>
<td><input type="textarea" cols=16 rows=6 name="school_describ" /></td>
</tr>
</table>
//是否添加分机构
<input type="checkbox" id="school" onclick="show()"/>如果你有分支机构,请填写。
//分机构信息填写
<div id="Objall">
<div id="divObj">
<div id="Objtable">
<table>
<tr>
<td>分支机构1名:</td>
<td><input type="text" name="department_name[]" /></td>
</tr>
<tr>
<td>地区:</td>
<td><input type="text" name="department_area[]" /></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" name="department_address[]" /></td>
</tr>
<tr>
<td>联系人:</td>
<td><input type="text" name="department_linkman[]" /></td>
</tr>
<tr>
<td>联系方式:</td>
<td><input type="text" name="department_contact[]" /></td>
</tr>
<tr>
<td colspan="2"><hr color="gray"></td>
</tr>
</table>
</div>
</div>
<a href="#" onclick="addshow()">再添加一个分支机构</a>
<a href="#" onclick="cancel()">取消添加</a>
</div >
//form表单确认、取消
<input type="submit" value="确认"/><input type="button" value="取消" onclick="history.go(-1);"/>
//jQuery控制代码
<script language="javascript">
//默认执行
$(document).ready( function(){
$("#Objall").hide();
$("#school").removeAttr("checked");//取消选中
});
//显示添加分机构
function show(){
if($("#school").attr("checked")==true){
$("#Objall").show();
}else{
$("#Objall").hide();
}
}
//取消添加
if(i == 1){
$("#Objall").hide();
$("#school").removeAttr("checked");//取消选中
}else{
$("#Objtable"+i+"").remove();
i = i-1;
}
//继续添加显示,同时替换1,使之随添加内容增加而递增
var i =1;
function addshow(){
i = i+1;
var aa=$("#Objtable").html();
aa = "<div id= Objtable"+i+" >" + aa + "</div>";
aa=aa.replace('1',i);
$("#divObj").append(aa);
}
</script>
由于初期附件中demo功能可能有不完善之处,现在已做了更新,能更好的体现JQuery的灵活控制的魅力,欢迎大家下载研究,有不妥之处还请不吝赐教,谢谢
...
分享到:
相关推荐
jquery div 添加取消 内容替换 Demo,代码清晰,共初学者用
下面小编就为大家带来一篇用jQuery向div中添加Html文本内容的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了Jquery动态替换div内容及动态展示的方法。分享给大家供大家参考。具体分析如下: 一、问题: 项目中需要在后台拼接html然后在前台通过ajax展示到div中: 复制代码 代码如下:sys_ajaxGet(“/dynamic/...
jquery监听DIV的事件,可监听DIV的变化的事件,直接引用即可使用
点击弹出DIV窗口,后面页面变灰,只能操作弹出窗口的内容,点击取消,关闭DIV窗口,恢复原来的页面
Jquery+div+css 鼠标经过内容切换实例,有用到可以拿去参考哦!
jquery图片截取DEMO,jquery图片截取DEMO
jQuery Easing div切换效果的例子,不同效果的展示。
jquery实现div模块轮播切换
jquery div 弹出框 jquery div 弹出框 jquery div 弹出框 jquery div 弹出框
jQuery单击div更改背景颜色
jquery 添加删除 DIV 和 jquery 切换特效 jquery 添加删除 DIV 和 jquery 切换特效
jquery div拖动排序效果代码是一款打开从左到右慢慢展开,可自由拖动排序特效.
在开发过程中遇到了上面标题列出的问题:如何监听div内容的变化,下面是具体的解决思路,感兴趣的朋友可以参考下
jquery实例 jquery demo jquery UI demo ,全部是例子 一看就会用
14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val() 方法 20. 小结2 21. CSS DOM 操作 22. 事件处理 23. 动画 24. 实验:...
jquerydemo锋利的jQuery的demojquerydemo锋利的jQuery的demo 个人在看锋利的jQuery所作的demo
Jquery Sortable实现div拖动排序效果 Jquery Sortable实现div拖动排序效果
利用jquery ui和append实现元素添加,拖动。自定义div大小!