jquery 怎样清空前一次的查询结果？
我在一个form的里面动态的显示查询结果（是一个table），但是第二次的查询后，第一次的查询结果仍然在页面显示。怎样实现清空前次的结果啊，只显示此次的？
$("#btn").click(function(){
//点击按钮后，根据查询条件获得结果
//window.location.reload();或者this.reset();都不行...
});
function result(dataList)
{
} //这是回调函数，将返回的结果（dataList）显示到页面
我用或者都不行...
最好有详细的代码哈，小妹感激不尽！
我试过$("#form")[0].reset(); $(this).reset()。。。
第1个回答 推荐于2017-09-06
如果是表格的话，一般第一行是标题，从第二行开始是正式的数据，只需清除序号大于0的行。
jquery代码：
$("#tableId tr:gt(0)").remove();
然后从新用新数据填充表格即可,比如后台来了新数据age以及name,
var content = "<tr><td>" + age + "</td><td>" + name + "</td></tr>";
$("#tableId).append(content);
如果是div或者span，可以直接用$("#div").html()或者$("#div").empty()清除。
jquery代码：
$("#tableId tr:gt(0)").remove();
然后从新用新数据填充表格即可,比如后台来了新数据age以及name,
var content = "<tr><td>" + age + "</td><td>" + name + "</td></tr>";
$("#tableId).append(content);
如果是div或者span，可以直接用$("#div").html()或者$("#div").empty()清除。
第2个回答 推荐于2017-10-08
是清空form表单填写的数据还是结果？如果是清空结果的话，还是用上次回答的问题给示例吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
var list = [{"id":"1","name":"A","age":20},{"id":"2","name":"B","age":21},{"id":"3","name":"C","age":22}];
result(list);
$("#reset").click(function(){
var lists = [{"id":"3","name":"A","age":30},{"id":"4","name":"B","age":31},{"id":"5","name":"C","age":34}];
result(lists);
});
})
function result(dataList){
$("#students tbody").empty();
for(var index = 0,l = dataList.length;index<l;index++){
$("#students tbody").append("<tr><td>"+ dataList[index].id +"</td><td>"+ dataList[index].name+"</td><td>"+ dataList[index].age +"</td></tr>");
}
}
</script>
<body>
<form>
<button type="button" id="reset">button</button>
</form>
<table id="students">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>追问
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
var list = [{"id":"1","name":"A","age":20},{"id":"2","name":"B","age":21},{"id":"3","name":"C","age":22}];
result(list);
$("#reset").click(function(){
var lists = [{"id":"3","name":"A","age":30},{"id":"4","name":"B","age":31},{"id":"5","name":"C","age":34}];
result(lists);
});
})
function result(dataList){
$("#students tbody").empty();
for(var index = 0,l = dataList.length;index<l;index++){
$("#students tbody").append("<tr><td>"+ dataList[index].id +"</td><td>"+ dataList[index].name+"</td><td>"+ dataList[index].age +"</td></tr>");
}
}
</script>
<body>
<form>
<button type="button" id="reset">button</button>
</form>
<table id="students">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>追问
谢谢你啊~再请教一下，就是我按照你的方法在页面动态显示查询结果时，新增的每一行最后都有一个删除，然后在脚本里面有
$(".delBtn").click(function(){
$(this).parent().parent().remove();//删除本行
});
但是点击新增行的删除按钮，没有反应啊....
有关动态生成的dom元素要实现事件得用事件委托live
$(".delBtn").live("click",function(){
$(this).parent().parent().remove();//删除本行
});
相似回答
