<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章列表</title>
</head>
<body>
<div id="table">
<table border="1" align="center" width="1000">
<tr align="center">
<!---设置搜寻的文本框和搜寻按钮->
<td colspan="7">标题：<input type="text" name="search" id="search"><input type="button" value="ajax搜索" οnclick="search()"></td>
</tr>
<tr>
<th><input type="checkbox" id="checkbox_all" οnclick="checkbox()">全选/反选</th>
<th>编号</th>
<th>标题</th>
<th>内容</th>
<th>作者</th>
<th>类别</th>
<th>时间</th>
</tr>
{foreach $lists as $list}
<tr align="center">
<td><input type="checkbox" name="box"></td>
<td>{$list.id}</td>
<td>{$list.title}</td>
<td>{$list.content}</td>
<td>{$list.author}</td>
<td>{$list.cate}</td>
<td>{$list.time|date_format:'%D %H:%M:%S'}</td>
</tr>
{/foreach}
</table>
</div>
</body>
<script type="text/javascript">
function checkbox(){
//设置反选
var allcheck=document.getElementById('checkbox_all');
var box=document.getElementsByName('box');
for(var i=0;i<box.length;i++){
if(box[i].checked==true){
box[i].checked=false;
}else{
box[i].checked=true;
}
}
}
//搜寻方法
function search(){
var search=document.getElementById('search').value;
//创建ajax对象传递搜索内容到动态页面进行数据查询
var xhr=new XMLHttpRequest();
xhr.open('get',"search.php?search="+search);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//将查询到的表单数据通过响应文本的方式替换本页面的table标签
document.getElementById('table').innerHTML=xhr.responseText;
}
}
}
</script>
</html>
原文链接：https://blog.csdn.net/living_ren/article/details/78868196
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
还没有人抢沙发呢~