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正则匹配换行问题实现代码
Dec 10 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 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程序员编程注意事项
2008/04/10 PHP
PHP 变量的定义方法
2010/01/26 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
详解python做UI界面的方法
2019/02/27 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python多进程重复加载的解决方式
2019/12/13 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python编写实现抽奖器
2020/09/10 Python
python函数超时自动退出的实操方法
2020/12/28 Python
英国高街电视:High Street TV
2018/05/22 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
教师远程培训感言
2014/03/06 职场文书
爱心捐款感谢信
2015/01/20 职场文书
护士岗位竞聘书
2015/09/15 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python