这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 JS 实现动态增加和删除 li 标签行的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如下所示:
- 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 标签行的实例代码全部内容了,希望大家多多支持 phperz~
来源: http://www.phperz.com/article/17/0525/331151.html