var data = {
"list" : [
{"id" : 1,"name" : "我的分组1"},
{"id" : 2,"name" : "我的分组2"},
{"id" : 3,"name" : "我的分组3"},
{"id" : 4,"name" : "我的分组4"}
]
}
var action = {
sort:function(list, inc){
$("sort").className = inc?"down":"up";
list.sort(function(a, b){
return (inc?1:-1)*a.name.localeCompare(b.name);
});
render(data);
},
create : function(name){
data.list.push({id: +new Date(),name: name});
render(data);
},
edit : function(id){
each(data.list, function(value, i){
data.list[i].state = value.id == id ? "edit" : "normal";
});
render(data);
},
del : function(id){
each(data.list, function(value, i){
if(value.id == id){
data.list.splice(i,1);
}
})
render(data);
},
save : function(id){
each(data.list, function(value, i){
if(value.id == id){
value.name = $("g_" + id).value;
value.state = "normal";
}
});
render(data);
},
cancel : function(id){
each(data.list, function(value, i){
data.list[i].state = "normal";
});
render(data);
}
}
function $(id){
return document.getElementById(id);
}
function each(obj, fn){
for (var i = 0; i < obj.length; i++) {
fn.call(obj[i], obj[i], i);
}
}
function render(data){
$("container").innerHTML = teamList(data);
}

<c:client id="teamList">
<c:for items="${list}" var="item">
<div class="${item.state}">
<c:if test="${item.state == 'edit'}">
<div class="cell1">
<input id="g_${item.id}" value="${item.name}" />
</div>
<div class="cell2">
<button onclick="action.submit(${item.id})">
提交
</button>
</div>
<div class="cell3">
<button onclick="action.cancel(${item.id})">
取消
</button>
</div>
</c:if>
<c:else>
<div class="cell1">${item.name}</div>
<div class="cell2">
<img src="images/edit.gif"
onclick="action.edit(${item.id})" />
</div>
<div class="cell3">
<img src="images/delete.gif"
onclick="action.del(${item.id})" />
</div>
</c:else>
</div>
</c:for>
</c:client>