序言:在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);
});