- 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()清楚表格中所有子元素啊,这样就保证后面添加的表头不会被清楚了,