JS实现动态增加和删除li标签行

最新推荐文章于 2023-04-06 10:37:16 发布

weavergan

最新推荐文章于 2023-04-06 10:37:16 发布

阅读量8k

点赞数

文章标签： jsp 动态 js

本文链接：https://blog.csdn.net/ganshaobo/article/details/17229919

版权

function addDepartment()
{
	var x = document.getElementById('department');
	var l = x.childNodes.length;
	var li = document.createElement("li");
	li.className = "list_nr_bg";
	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' οnclick='deleteDepartment(this)' value='删除'></span>";
	x.appendChild(li);
}

function deleteDepartment(obj)
{
	if(window.confirm("确认删除吗？")){
		var li = obj.parentNode.parentNode; //获得当前行
		var ul = li.parentNode;//获得上一级标签
		ul.removeChild(li); //删除当前行
	} else {
		return false;
	}
}

HTML为：

<ul id="department">
	<li class="list_nr_bg">
		<span class="nr6">所属院系：</span>
		<span><input type="button" οnclick="addDepartment()" value="增加"></span>
	</li>
	<li class="list_nr_bg">
		<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>
	</li></ul>