我用jquery ajax的.post方法，在服务器上拉回来的数据可以对其进行再一次的操作吗？

Question

就是我按了一个按钮，触发post方法，到servlet里把从数据库查询出来的结果进行html代码的拼接，把它拼接成一个表格，然后返回到jsp上，现在问题是我可以对这个表格进行再一次的操作吗？（表格里每一行都有一个按钮，我想按一下按钮就把这行记录给删掉了）
附上部分代码：
jsp：
<div id="viewAll" class="List1" onClick="showAll();" >查看</div><div id="content" ></div>
点击“查看”，触发showAll()，返回的数据在id为content的div里显示js：
function showAll(){
$.post("StaffServlet",function(data){
$("#content").html(data);
},"html");
}servlet：
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
PrintWriter out=resp.getWriter();
try {
out.print(DAOFactory.getIStaffDAOInstance().viewAll());
System.out.println(DAOFactory.getIStaffDAOInstance().viewAll());
System.out.println("here.....");
} catch (Exception e) {
e.printStackTrace();
}
}java：
@Override
public String viewAll() throws Exception {
String sql="select * from staff";
this.ptmst=this.con.prepareStatement(sql);
ResultSet rs=this.ptmst.executeQuery();
StringBuffer strbuf=new StringBuffer();
strbuf.append("<table align='center' border=1>");
strbuf.append("<tr><td>操作</td><td>编号</td><td>姓名</td><td>职务</td><td>备注</td></tr>");
while(rs.next()){
int i=0;
strbuf.append("<tr>").append("<td><input id='i+1' type='button' value='删除' onClick='dropData(i+1);'></td>");
while(i<4){
strbuf.append("<td>").append(rs.getString(i+1)).append("</td>");
i++;
}
strbuf.append("</tr>");
}
strbuf.append("</table>");
return strbuf.toString();
}如以上代码所示，我想在返回的表格里按“删除”按钮，把对应行的记录删除掉，介样做可以的吗？求指导.......jqueryajax服务器servlet

Answer 1

用ajax提交然后在返回的success数据里再返回的结果用js动态拼装成表格行，这样你在界面层就能实现的功能为什么要在后台去拼，麻烦

Answer 2

感谢回答，but......可以给个例子吗？

Answer 3

有点耦合，不过可行。
每个行最好有个身份证，如什么编号什么的。这样传到后台好区分。说下我曾经的拙劣方法
把onclick时间的参数换成dropData(this);
假设此行编号为rowNo
strbuf.append("<tr>").append("<td no="+rowNo+"><input id='i+1' type='button' value='删除' onClick='dropData(this.parentNode);'></td>");
js中
funciton dropData(td)
{
   var rowNo = td.getAttribute("rowNo");
   $ajax(type : "post",
cache : false,
url :  xxx.do// 请求地址
data : {
flag : "deldate", //比方是操作了性
rowno :rowNo 
},
dataType : "json", // 返回值类型
success : function(rs) { // ajax执行成功后执行的方法
if (rs.success == 1) {
                      var tr = td.parentNode;
                      var table = tr.parentNode;
                      table.removeChild(tr);
                }
     
);
}大概思路就这样

Answer 4

脚本大概就是下面这样，具体做成什么效果你自己改改吧!<table width="98%" align="center" class="grid-table" border="0"
cellspacing="0" cellpadding="3" style="table-layout:fixed;margin-top:1px">
<thead>
<tr>
<th class="grid-th" width="20px">
用户名
</th>
<th class="grid-th"  width="20px" align="center" ><input type="checkbox" id="check_all" /></th>
<th class="grid-th" width="90px">
登录名
</th>
<th class="grid-th" width="70px">
密码
</th>
<th class="grid-th" width="90px">
是否有效
</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
<tfoot id="templateTr" style="display:none">
<tr class="{tr_class}">
<td class="grid-td" align="center"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{username}
</td>
<td class="grid-td" align="center"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{loginname}
</td>
<td class="grid-td" align="center"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{pwd}
</td>
<td class="grid-td"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{yxbz}
</td> 
</tr>
</tfoot>
</table>
<script>
function query(url){
jQuery.ajax({
url:url
,data:encodeURI(encodeURI(condition))
,dataType:'json'
,success:function(data){ 
  if (data.error != null){ 
alert(data.error);
return;
}
if(data.isLogin=="N"){
alert("未登录");
window.top.location.href="<%=contextPath%>/login.jsp";
return;
}
$('#tbody').html('');
var html = [];
var templateTr = $('#templateTr').html();
var len = data.items.length;
if (len == 0){
html.push('<tr><td class="grid-td" colspan="4" align="center" style="color:#F00;">查无数据</td></tr>');
isExport=false;
}
else{
for(var i = 0 ; i < len ; i++){
var o = data.items[i];
var tmp = templateTr; 

tmp = tmp.replace(/\{username\}/g,(o.username == null ? '&nbsp;':o.username));
tmp = tmp.replace(/\{loginname\}/g,(o.loginname == null ? '&nbsp;':o.loginname));
tmp = tmp.replace(/\{pwd\}/g,o.pwd);
tmp = tmp.replace(/\{yxbz\}/g,o.yxbz==1?"有":"无");

html.push(tmp);
}
}
var str = html.join('');
$('#tbody').html(str);
}
,error:function(){
alert('服务端报错');
}
}); 
}
</script>

Answer 5

上面是加载的处理方法，如果把代码再改一下就好了。<table width="98%" align="center" class="grid-table" border="0"
cellspacing="0" cellpadding="3" style="table-layout:fixed;margin-top:1px">
<thead>
<tr>
<th class="grid-th" width="20px">
用户名
</th>
<th class="grid-th"  width="20px" align="center" ><input type="checkbox" id="check_all" /></th>
<th class="grid-th" width="90px">
登录名
</th>
<th class="grid-th" width="70px">
密码
</th>
<th class="grid-th" width="90px">
是否有效
</th>
<th class="grid-th" width="90px">
操作
</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
<tfoot id="templateTr" style="display:none">
<tr class="{tr_class}">
<td class="grid-td" align="center"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{username}
</td>
<td class="grid-td" align="center"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{loginname}
</td>
<td class="grid-td" align="center"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{pwd}
</td>
<td class="grid-td"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{yxbz}
</td> 
<td class="grid-td"
style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
{cz}
</td> 
</tr>
</tfoot>
</table>function query(url){
jQuery.ajax({
url:url
,data:encodeURI(encodeURI(condition))
,dataType:'json'
,success:function(data){ 
  if (data.error != null){ 
alert(data.error);
return;
}
if(data.isLogin=="N"){
alert("未登录");
window.top.location.href="<%=contextPath%>/login.jsp";
return;
}
$('#tbody').html('');
var html = [];
var templateTr = $('#templateTr').html();
var len = data.items.length;
if (len == 0){
html.push('<tr><td class="grid-td" colspan="4" align="center" style="color:#F00;">查无数据</td></tr>');
isExport=false;
}
else{
for(var i = 0 ; i < len ; i++){
var o = data.items[i];
var tmp = templateTr; 

tmp = tmp.replace(/\{username\}/g,(o.username == null ? '&nbsp;':o.username));
tmp = tmp.replace(/\{loginname\}/g,(o.loginname == null ? '&nbsp;':o.loginname));
tmp = tmp.replace(/\{pwd\}/g,o.pwd);
tmp = tmp.replace(/\{yxbz\}/g,o.yxbz==1?"有":"无");
tmp = tmp.replace(/\{cz\}/g,'<a href="javascript:;" onclick="delete('+o.id+')">删除</a>');

html.push(tmp);
}
}
var str = html.join('');
$('#tbody').html(str);
}
,error:function(){
alert('服务端报错');
}
}); 
}

function delete(id){
jQuery.ajax({
url:"你删除数据的URL"
,data:encodeURI(encodeURI(condition))
,dataType:'json'
,success:function(data){ 
  if (data.error != null){ 
alert(data.error);
return;
}
if(data.isLogin=="N"){
alert("未登录");
window.top.location.href="<%=contextPath%>/login.jsp";
return;
}
if(data.status==1){
alert('删除成功');
query("你查询数据的URL");
}else{
alert('删除失败');
}
,error:function(){
alert('服务端报错');
}
}); 

}

Answer 6

我想在servlet里查出数据后，将它弄成一个集合，然后传回给data，在js里拼接，介样可以的吗？

Answer 7

当然可以了，用js处理数据，然后操作dom显示出来。