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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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开发的一些注意点总结
2010/10/12 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
页面中js执行顺序
2009/11/09 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
js实现简单模态框实例
2018/11/16 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
优秀求职信
2014/05/29 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
历史博物馆观后感
2015/06/05 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL