jquery 增加 tr 增加 li

最新推荐文章于 2021-09-10 14:30:59 发布

手残大帝

最新推荐文章于 2021-09-10 14:30:59 发布

阅读量917

点赞数

分类专栏：【前端】

本文链接：https://blog.csdn.net/u010913106/article/details/46314429

版权

【前端】专栏收录该内容

28 篇文章 0 订阅

订阅专栏

序言：在jsp常需要jquery 动态地给table 增加tr 删除tr

动态地给ul 增加 li 删除 li

1、jquery给 ul 增加 li , 删除 li

   
function add(){ 
 var $li = $("<li><input type='text'><input type='text'><a href='#' οnclick='del(this)'></a><a href='#' οnclick='add()'></a></li>"); 
 $(".cloneli").append($li); 
} 

function del(obj){ 
	$(obj).parents("li").remove(); 
} 


2、jquery给 table 增加 tr , 删除 tr

function addTr(){ 
	var $tr = $("<tr class='info'>"+
		<th>资源名称:</th>"+
		<td>"+ 
		<input type='hidden' name='srcid' />"+ 
		<input name='name' οnclick='checkRead()'/>"+ 
		<input name='rName' />"+ 
		<a href='#' οnclick='delTr(this)'>删除</a>"+ 
		</td>"+
		</tr>"); 
	$("#resourceDiv").append($tr); 
} 
  
function delTr(obj){ 
	$(obj).parents(".info").remove(); 
}

应用举例：

添加：

$("#saveItem").on("click",function(){
if(checkItem()){
var tr = $("<tr>"
	+"<td><input  name='envIds' value="+$('#envIdAdd').val()+" />"+$("#envIdAdd").find("option:selected").text()+"</td>"
	+"<td><input  name='hostAppTypes' value="+$("#hostAppType").val()+" />"+$("#hostAppType").find("option:selected").text()+"</td>"
	+"<td><input  name='counts' value="+$("#count").val()+" />"+$("#count").val()+"</td>"
	+"<td><a href='#' οnclick='delTr(this)' style='color:#e70'>删除</a></td>"
	+"</tr>");
			
$("#itemTby").append(tr);
}
});

展示：

jQuery.each(data.autoAppApplyItemVos, function(i,item){  
       var tr = $("<tr>"
         +"<td><input type='hidden' name='envIds' value="+item.envId+" />"+item.envName+"</td>"
         +"<td><input type='hidden' name='hostAppTypes' value="+item.hostAppType+" />"+item.typeName+"</td>"
         +"<td><input type='hidden' name='counts' value="+item.count+" />"+item.count+"</td>"
         +"<td><a href='#' οnclick='delTr(this)' style='color:#e70'>删除</a></td>"
         +"</tr>");
            				
       $("#itemTby").append(tr);
});