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 相关文章推荐
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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中的cookie
2006/11/26 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP 实现链式操作
2021/03/09 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
python 调用Google翻译接口的方法
2020/12/09 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
迟到检讨书900字
2014/01/14 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
《藏戏》教学反思
2016/02/23 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python