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 相关文章推荐
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
微信小程序调用后台service教程详解
Nov 06 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
实用函数4
2007/11/08 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
ThinkPHP分页实例
2014/10/15 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
sails框架的学习指南
2014/12/22 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
如何使用python代码操作git代码
2020/02/29 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
在校生自我鉴定
2014/01/23 职场文书
学雷锋演讲稿
2014/03/04 职场文书
公益广告语集锦
2014/03/13 职场文书
年终晚会活动方案
2014/08/21 职场文书
初中毕业生自我评价
2015/03/02 职场文书
七一晚会主持词
2015/06/29 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书