JS实现动态增加和删除li标签行的实例代码


Posted in Javascript onOctober 16, 2016

如下所示:

function addDepartment()
{
<span style="white-space:pre">	</span>var x = document.getElementById('department');
<span style="white-space:pre">	</span>var l = x.childNodes.length;
<span style="white-space:pre">	</span>var li = document.createElement("li");
<span style="white-space:pre">	</span>li.className = "list_nr_bg";
<span style="white-space:pre">	</span>li.innerHTML = "<span class='nr6'><select name='institute'><c:if test='${baseInstitutes !=null}'><c:forEach items='${baseInstitutes}' var='baseInstitute'><option value='${baseInstitute.id}'>${baseInstitute.instituteName}</option></c:forEach></c:if></select></span><span class='nr6'>专业:</span><span class='nr6'><input name='specialty' type='text'></span><span><input type='button' onclick='deleteDepartment(this)' value='删除'></span>";
<span style="white-space:pre">	</span>x.appendChild(li);
}

function deleteDepartment(obj)
{
<span style="white-space:pre">	</span>if(window.confirm("确认删除吗?")){
<span style="white-space:pre">		</span>var li = obj.parentNode.parentNode; //获得当前行
<span style="white-space:pre">		</span>var ul = li.parentNode;//获得上一级标签
<span style="white-space:pre">		</span>ul.removeChild(li); //删除当前行
<span style="white-space:pre">	</span>} else {
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>}
}

HTML:

<ul id="department">
<span style="white-space:pre">	</span><li class="list_nr_bg">
<span style="white-space:pre">		</span><span class="nr6">所属院系:</span>
<span style="white-space:pre">		</span><span><input type="button" onclick="addDepartment()" value="增加"></span>
<span style="white-space:pre">	</span></li>
<span style="white-space:pre">	</span><li class="list_nr_bg">
<span style="white-space:pre">		</span><span class="nr6">
<span style="white-space:pre">		</span><select name="institute">
<span style="white-space:pre">		</span><c:if test="${baseInstitutes !=null}">
<span style="white-space:pre">		</span><c:forEach items="${baseInstitutes}" var="baseInstitute">
<span style="white-space:pre">			</span><option value="${baseInstitute.id}">${baseInstitute.instituteName}</option>
<span style="white-space:pre">		</span></c:forEach>
<span style="white-space:pre">		</span></c:if>
<span style="white-space:pre">		</span>/select>
<span style="white-space:pre">		</span></span>
<span style="white-space:pre">		</span><span class="nr6">专业:</span>
<span style="white-space:pre">		</span><span class="nr6"><input name="specialty" type="text"></span>
<span style="white-space:pre">	</span></li></ul>

以上就是小编为大家带来的JS实现动态增加和删除li标签行的实例代码全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
JS 遮照层实现代码
Mar 31 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
JS实现禁止鼠标右键的功能
Oct 15 #Javascript
Vue.js快速入门实例教程
Oct 15 #Javascript
JavaScript随机生成颜色的方法
Oct 15 #Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 #Javascript
js控制div层的叠加简单方法
Oct 15 #Javascript
You might like
一个域名查询的程序
2006/10/09 PHP
php学习之function的用法
2012/07/14 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
mui框架移动开发初体验详解
2017/10/11 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
详解vue v-model
2020/08/31 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python 同时读取多个文件的例子
2019/07/16 Python
python 类之间的参数传递方式
2019/12/20 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
工作过失检讨书
2014/02/23 职场文书
公司合作协议书范本
2014/04/18 职场文书
初三新学期计划书
2014/05/03 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
大学入学感言
2015/08/01 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL