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 相关文章推荐
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
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
fgetcvs在linux的问题
2012/01/15 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
javascript判断office版本示例
2014/04/11 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
中学家长会邀请函
2014/01/17 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
《悯农》教学反思
2014/04/28 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
会议简讯范文
2015/07/20 职场文书
结婚典礼致辞
2015/07/28 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书