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去除空格的几种方法
Oct 03 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JavaScript基础之this详解
Jun 04 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
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
php 检查电子邮件函数(自写)
2014/01/16 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
邀请函样本
2015/02/02 职场文书
现役军人家属慰问信
2015/03/24 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Python中的嵌套循环详情
2022/03/23 Python