jquery实现table表格的查询功能

dom元素

<table border="1" cellpadding="5" cellspacing="0">
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>学历</th>
			<th>工作性质</th>
		</tr>
	</thead>
	<tbody></tbody>

</table>
<select name="" id="">
	<option value="全部">全部</option>
	<option value="硕士">硕士</option>
	<option value="本科">本科</option>
</select>

js代码

<script>
	$(function(){
		var arr = [{
			name: '张三',
			age: 20,
			recod: '本科',
			work: '技术'
			}, {
				name: '李四',
				age: 23,
				recod: '硕士',
				work: '技术'
			}, {
				name: '王五',
				age: 24,
				recod: '本科',
				work: '技术'
			}, {
				name: '赵柳',
				age: 28,
				recod: '硕士',
				work: '技术'
			}, {
				name: '啦啦',
				age: 28,
				recod: '硕士',
				work: '技术'
		}]
		function show(arr){
			var res='';
			for(var i=0;i<arr.length;i++){
				res+='<tr><td>'+arr[i].name+'</td><td>'+arr[i].age+'</td><td>'+arr[i].recod+'</td><td>'+arr[i].work+'</td></tr>';
			}
			
			$("tbody").html(res);
		}
		show(arr);
		// 查询数据 (按照学历)
		$("select").change(function(){
			var newArr=[];
			for(var j=0;j<arr.length;j++){
				if($(this).val()=='全部'){
					newArr.push(arr[j])
				}else if($(this).val()==arr[j].recod){
					newArr.push(arr[j])
				}
			}
			show(newArr);
			
		})

	
	})
</script>