问题描述
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><linkhref="Style/tableStyle.css"rel="stylesheet"/><linkhref="Style/style.css"rel="stylesheet"/><scriptsrc="JQ/jquery-1.7.js"></script><styletype="text/css">*{margin:0px;padding:0px;}#divLeft{width:500px;border:1pxsolidred;float:left;}#divRight{width:500px;height:500px;border:1pxsolidgreen;margin-left:500px;}</style><scripttype="text/javascript">//===================//加载页面//===================$(function(){initTable();//初始化表格});//===================//页面初始化//===================functioninitTable(){$.ajax({type:"post",data:""//发送后台数据,url:"Buttle_Select_Buttle.ashx",dataType:"json"//后台返回数据的类型,success:function(goBack){$("#Main").html();for(variingoBack){varstrTr="<tr>";strTr+="<td>"+goBack[i].Id;+"</td>";strTr+="<td>"+goBack[i].Name;+"</td>";strTr+="<td>"+goBack[i].Age;+"</td>";strTr+="<td>"+goBack[i].Interest;+"</td>";strTr+="<td><aid="+goBack[i].Id+"href='#'>详细</td>";strTr+="<td><aid="+goBack[i].Id+"href='#'>修改</td>";strTr+="<td><aid="+goBack[i].Id+"href='#'>删除</td>";strTr+="</tr>"$("#Main").append(strTr);}Select_Particular();//绑定详细事件Update();//修改页面Delete();//删除数据}});}//===================//详细//===================functionSelect_Particular(){$("#Maina:contains('详细')").click(function(){varid=$(this).attr("id");$.ajax({type:"Post"//请求方式,url:"Bttle_SelectXiang_Buttle.ashx"//请求地址,data:"id="+id,dataType:"json"//后台返回数据的类型,不写的话,不显示数据//,async:false,success:function(goBack){for(variingoBack){$("#Name")[0].value=goBack[i].Name;$("#Age")[0].value=goBack[i].Age;$("#Interest")[0].value=goBack[i].Interest;}}});});}//===================//添加//===================functionAdd(){$("#sub").click(function(){varinput=$("#form2").serializeArray();$.ajax({type:"post",url:"Buttle_Add_Buttle.ashx",data:input,dataType:"text"//,timeout:3000//,cache:true,success:function(BackData){if(BackData=="1"){alert("添加成功");}elseif(BackData=="0"){alert("添加失败");}elseif(BackData=="Invalidformat"){alert("数据类型错误,添加失败");//数据类型错误}}//,error:function(msg){alert("error");}//,complete:function(XMLHttpRequest,BackData){XMLHttpRequest=null}});//alert(1);});}//===================//修改数据//===================functionUpdate(){$("#Maina:contains('修改')").click(function(){varid=$(this).attr("id");$.ajax({type:"Post"//请求方式,url:"Bttle_SelectXiang_Buttle.ashx"//请求地址,data:"id="+id,dataType:"json"//后台返回数据的类型,不写的话,不显示数据,success:function(goBack){for(variingoBack){$("#UpName")[0].value=goBack[i].Name;$("#UpAge")[0].value=goBack[i].Age;$("#UpInterest")[0].value=goBack[i].Interest;$("#UpId")[0].value=goBack[i].Id;}}});});$("#btnUp").click(function(){varpostData=$("#form3").serializeArray();$.post("Buttle_Update_Buttle.ashx",postData,function(data){//alert(1);if(data=="成功"){alert("修改成功");initTable();//刷新表格}else{alert("修改失败");}});});}//===================//删除数据//===================functionDelete(){$("#Maina:contains('删除')").click(function(){varid=$(this).attr("id");$.ajax({type:"Post"//请求方式,url:"Buttle_Delete_Buttle.ashx"//请求地址,data:"id="+id,dataType:"text"//后台返回数据的类型,不写的话,不显示数据,success:function(goBack){if(goBack=="1"){alert("删除成功");}else{alert("删除失败");}}});});}</script></head><body><divid="divLeft"><tableborder="1"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>兴趣</th><th>查询</th><th>修改</th><th>删除</th></tr><tbodyid="Main"></tbody></table></div><divid="divRight"><formid="form2">姓名<inputtype="text"name="Name"id="Name"value=""/><br/>年龄<inputtype="text"name="Age"id="Age"value=""/><br/>兴趣<inputtype="text"name="Interest"id="Interest"value=""/><br/><inputtype="submit"value="添加"id="sub"/></form><br/><formid="form3">编号<inputtype="text"name="UpId"id="UpId"value=""/><br/>姓名<inputtype="text"name="UpName"id="UpName"value=""/><br/>年龄<inputtype="text"name="UpAge"id="UpAge"value=""/><br/>兴趣<inputtype="text"name="UpInterest"id="UpInterest"value=""/><br/><inputtype="submit"value="修改"id="btnUp"/></form></div></body></html>
解决方案
解决方案二：
那里刷新了？那个函数？提问题麻烦你说清楚，这么长要我们一行行的去看啊？
解决方案三：
哪处代码有这个问题呢
解决方案四：
请详细描述，太模糊了啊
解决方案五：
你在$("#btnUp").click通过ajax更新表单之后又调用了initTable()，这又是一次ajax，所以没有那么快返回。你试试不用alert，过一会儿是不是也会刷新成功。另外，可能更好的做法是在$("#btnUp").click的这个ajax直接返回数据，而不是通过initTable()再调用一次ajax从服务器请求数据，还有initTable的success里面的$("#Main").html();这句是取元素内容，而不是清空元素内容，清空是$("#Main").html('');还有initTable的success里面的Select_Particular()，Update()和Delete()这几句没有必要每次初始化表格的时候都绑定一次事件，可以使用类似$(document).on('click','#Maina:contains("详细")',function(){})绑定一次就可以了，这个方法就算后面的表格是动态生成的，也可以自动绑定事件。
解决方案六：
代码没看完，头晕了
解决方案七：
这么长，你确定全部有错吗
解决方案八：
把那个需要alert才能刷新的改成同步试试.
解决方案九：
如果确定哪里有问题，用浏览器单步一下
解决方案十：
删掉了一些元素，修改了些代码，在线，可以点击看看。你表格查询详情的内容其实在表格里面都有了，所以没有必要每次都再向服务器请求，除非你对数据的实时性要求比较高，否则直接把表格里面的内容自动填到右边表单就可以了，下面的代码就是这么处理的。点击表格里面的修改按钮，也会自动把相应行的内容填到右边表单里面，表单右边的按钮会变成"提交修改"并取消disabled，编辑好后，点击提交修改，可以发送到服务器，如果成功，则重置表单，并从服务器刷新左边表格，按钮变回"提交新记录"并disabled。点击右边表单左边的添加按钮，会重置表单，以便填写数据，右边按钮取消disabled。填好之后，点击提交新记录，可以发送到服务器，如果成功，则重置表单，并从服务器刷新左边表格，按钮变回"提交新记录"并disabled。点击表格里面的删除按钮，如果成功，并从服务器刷新左边表格。服务器返回的状态都设成json的，用不同的数字表示不同的状态。<divid="divLeft"><tableborder="1"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>兴趣</th><th>查询</th><th>修改</th><th>删除</th></tr><tbodyid="Main"></tbody></table></div><divid="divRight"><formid="form">编号<inputtype="text"name="Id"id="fId"value=""disabled/><br/>姓名<inputtype="text"name="Name"id="fName"value=""/><br/>年龄<inputtype="text"name="Age"id="fAge"value=""/><br/>兴趣<inputtype="text"name="Interest"id="fInterest"value=""/><br/><inputtype="button"value="添加"id="btnAdd"/><inputtype="button"value="提交新记录"id="btnSubmit"disabled="disabled"/></form></div>
*{margin:0px;padding:0px;}#divLeft{width:300px;border:1pxsolidred;float:left;}#divRight{width:200px;height:500px;border:1pxsolidgreen;margin-left:320px;}
//===================//加载页面//===================$(function(){initTable();//初始化表格initButton();});//===================//页面初始化//===================functioninitTable(){$.get('',//'Buttle_Select_Buttle.ashx',function(res){vard=[{Id:1,Name:'n1',Age:18,Interest:'hh1'},{Id:2,Name:'n2',Age:28,Interest:'hh2'},{Id:3,Name:'n3',Age:38,Interest:'hh3'},{Id:4,Name:'n4',Age:48,Interest:'hh4'},{Id:5,Name:'n5',Age:58,Interest:'hh5'}];vardata=d;//parseJSON(res);varitems=[];$.each(data,function(index,item){varstrTr="<trid="+item.Id+">";strTr+="<td>"+item.Id+"</td>";strTr+="<td>"+item.Name+"</td>";strTr+="<td>"+item.Age+"</td>";strTr+="<td>"+item.Interest+"</td>";strTr+="<td><ahref='javascript:void(0);'class='btnSelect'>详细</td>";strTr+="<td><ahref='javascript:void(0);'class='btnUpdate'>修改</td>";strTr+="<td><ahref='javascript:void(0);'class='btnDelete'>删除</td>";strTr+="</tr>";items.push(strTr);})$("#Main").html(items.join(''));});}functionline2form(el){varcell=$(el).parents('tr').children('td');$('#fId').val(cell[0].innerHTML);$("#fName").val(cell[1].innerHTML);$("#fAge").val(cell[2].innerHTML);$("#fInterest").val(cell[3].innerHTML);}functionresetform(){$('#fId').val('');$("#fName").val('');$("#fAge").val('');$("#fInterest").val('');$('#btnSubmit').val('提交新记录').attr('disabled','disabled');}functionAdd(){varinput=$("#form").serialize();$.post('Buttle_Add_Buttle.ashx',input,function(res){vardata=parseJSON(res);if(data.status==1){alert("添加成功");resetform();initTable();//刷新表格}elseif(data.status==0){alert("添加失败");}elseif(data.status==2){alert("数据类型错误,添加失败");//数据类型错误}})}functionUpdate(){varinput=$("#form").serialize();$.post('Buttle_Update_Buttle.ashx',input,function(res){vardata=parseJSON(res);if(data.status==1){alert("修改成功");resetform();initTable();//刷新表格}elseif(data.status==0){alert("修改失败");}})}functioninitButton(){//===================//详细//===================$(document).on('click','#Maina.btnSelect',function(evt){line2form(evt.target);});//===================//添加//===================$(document).on('click','#btnAdd',function(){resetform();$('#btnSubmit').removeAttr('disabled');});//===================//修改数据//===================$(document).on('click','#Maina.btnUpdate',function(evt){line2form(evt.target);$('#btnSubmit').val('提交修改').removeAttr('disabled');})$(document).on('click','#btnSubmit',function(){varval=$('#btnSubmit').val();if(val=='提交新记录'){Add();}elseif(val='提交修改'){Update();}});//===================//删除数据//===================$(document).on('click','#Maina.btnDelete',function(){varid=$(this).parents('tr').attr('id');console.log(id);$.post('Buttle_Delete_Buttle.ashx',{'id':id},function(res){vardata=parseJSON(res);if(data.status==1){alert("删除成功");initTable();//刷新表格}elseif(data.status==0){alert("删除失败");}});});}
解决方案十一：
需要在你自己项目测试上面的代码的话，initTable改成functioninitTable(){$.get('Buttle_Select_Buttle.ashx',function(res){vardata=parseJSON(res);varitems=[];$.each(data,function(index,item){varstrTr="<trid="+item.Id+">";strTr+="<td>"+item.Id+"</td>";strTr+="<td>"+item.Name+"</td>";strTr+="<td>"+item.Age+"</td>";strTr+="<td>"+item.Interest+"</td>";strTr+="<td><ahref='javascript:void(0);'class='btnSelect'>详细</td>";strTr+="<td><ahref='javascript:void(0);'class='btnUpdate'>修改</td>";strTr+="<td><ahref='javascript:void(0);'class='btnDelete'>删除</td>";strTr+="</tr>";items.push(strTr);})$("#Main").html(items.join(''));});}