日期:2014-05-17  浏览次数:20771 次

jQuery append动态添加的页面对象如何避免刷新掉
JScript code


 $("select").change(function(){
  var $id=$(this).val();
    alert($(this).val());
    $.get("JsonServlet",{'id':$id},function(data){
   // alert(data);
        var dataObj=eval("("+data+")");
        
        for(var i=0;i<dataObj.length;i++){
          //alert(dataObj[i].name);
           $td=$("<td/>");    
           $td.text(dataObj[i].name);
           $tr=$("<tr/>");
           $tr.append($td);
          // $("#t").children().eq(0).append($tr);
          $("#t").append($tr);
             
        }    
    }); 
 });




页面table代码
HTML code

   <table width="333" height="29" border="2" align="center" id="t" >
   <tr>
   <td width="321">姓名</td>
   </tr>
   </table>




对于这段代码现在有两个问题:
1、页面刷新后,我append的数据就没有了。。
2、连续改变下拉框的值,我table里之前append的数据还在,新的数据会追加到旧值的后面

我想实现:1、刷新后table里追加的对象还在
  2、改变下拉框的值后,table里旧的值消失,新的值出现。

------解决方案--------------------
1.用$(function(){//相当于 body 上的onload事件
//这里就直接手动去触发change事件就可以了
$("select").change();//这样当页面被加载完成后就去执行change里的方法通过ajax去访问服务器了,如果你不想第一次访问页面就去访问服务器将数据输出到页面,你可以在下拉列表中加个标示,例如加个
<option value="0">--请选择-- </option>默认选择他,ajax访问的时候去做下判断 如果传古来的是0
也就是默认选择的话就不做处理 不去读取数据,其他情况就去读数据 这样就保证了,第一次加载页面后不会将数据显示了,只有你改变后才会有, 这种方法很常见
})
2.表头你不想删除你可以在添加表头以前就调用 $("#t").empty()清楚表格中所有子元素啊,这样就保证后面添加的表头不会被清楚了,