这里是一个简单的HTML文件,具有一个简单的搜索功能
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>搜索</title>
<style>
table{
border:1px solid black;
width:500px;
}
tr th,td{
border:1px solid red;
width:25%;
}
</style>
</head>
<body>
<div class="table">
<table class="userinfo">
<tr id="theader">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</table>
<input type="text">
<input type="button" value="搜索">
</div>
</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script>
$(function(){
$("input[type=button]").click(function(){
var txt=$("input[type=text]").val();
if($.trim(txt)!=""){
$("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show().css("background","red");
}else{
$("table tr:not('#theader')").css("background","#fff").show();
}
});
$.ajax({
url:'../js/userList.json',
type:'get',
dataType:'json',
success:function (data) {
console.log(data);
var theList =new Array,
info = data.first;
for (var i in info){
theList =
'<tr>'+
'<td>'+info[i].id+'</td>'+
'<td>'+info[i].name+'</td>'+
'<td>'+info[i].sex+'</td>'+
'<td>'+info[i].age+'</td>'+
'</tr>';
$('.userinfo').append(theList);
}
},
error:function (data) {
console.log('出错')
}
})
})
</script>
这里是JSON数据
{
"first":[
{ "id":"01", "name":"小吕", "sex":"男" , "age":"18" },
{ "id":"02", "name":"小红", "sex":"女" , "age":"19" },
{ "id":"03", "name":"小欧", "sex":"男" , "age":"21"},
{ "id":"04", "name":"小蔡", "sex":"男" , "age":"18"}
],
"mytime":[
{"thesecond":"60","themin":"1","thehour":"0"}
]
}
一定要使用jQuery的文件哦!
第一次记录