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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JavaScript数据类型详解
Apr 01 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
js图片上传的封装代码
Aug 01 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
QQ登录简单实现代码
2021/03/09 Javascript
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
通过JAVAScript实现页面自适应
2007/01/19 Javascript
js压缩利器
2007/02/20 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
Java及python正则表达式详解
2017/12/27 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
python pillow库的基础使用教程
2021/01/13 Python
商务日语专业毕业生求职信
2013/10/26 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
新兵入伍心得体会
2014/09/04 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
Element实现动态表格的示例代码
2021/08/02 Javascript