js练手小项目——JavaScript 表格数据搜索和element-ui使用

本文链接：https://blog.csdn.net/JIAY_WX/article/details/125769474

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手动实现表格查询</title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
	</head>
	<body>
		<input type="text" id="inputBox" onkeyup="find()" placeholder ="搜索..." />
		<br />
		<table id="myTable">
			<tr>
				<th>国家</th>
				<th>著名城市</th>
				<th>语言</th>
				<th>人种</th>
				<th>人口数量</th>
				<th>发达程度</th>
			</tr>
			<tr>
				<td>china</td>
				<td>北京</td>
				<td>汉语</td>
				<td>黄种人</td>
				<td>14亿</td>
				<td>发展中</td>
			</tr>
			<tr>
				<td>usa</td>
				<td>纽约</td>
				<td>英语</td>
				<td>白种人</td>
				<td>1</td>
				<td>发达</td>
			</tr>
			<tr>
				<td>russia</td>
				<td>莫斯科</td>
				<td>英语</td>
				<td>白种人</td>
				<td>1</td>
				<td>发达</td>
			</tr>
			<tr>
				<td>germany</td>
				<td>柏林</td>
				<td>英语</td>
				<td>白种人</td>
				<td>1</td>
				<td>发达</td>
			</tr>
			<tr>
				<td>France</td>
				<td>巴黎</td>
				<td>英语</td>
				<td>白种人</td>
				<td>1</td>
				<td>发达</td>
			</tr>
		</table>
	</body>
	<script src="new_file.js"></script>
</html>


#inputBox{
	background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
	background-position: 10px 12px; /* 定位搜索按钮 */
	background-repeat: no-repeat; /* 不重复图片 */
	width: 66%;
	font-size: 16px;
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	margin-bottom: 12px;
}
table{
	width: 70%;
	text-align: center;
}
th{
	background-color: #4CAF50;
	color: white;
	border-bottom: 1px solid #ddd;
	height: 50px;
}
td{
	border-bottom: 1px solid #ddd;
	height: 50px;
}
td:hover {background-color: #f5f5f5;}
tr:nth-child(even) {background-color: #f2f2f2;}

function find(){
	var va,tr,i,td,table,filter;
	filter=document.getElementById("inputBox").value;
	table=document.getElementById("myTable");
	tr=table.getElementsByTagName("tr");
	
	
	for(i=0;i<tr.length;i++){
		td=tr[i].getElementsByTagName("td")[1];
		if(td){
			if(td.innerHTML==filter){
				tr[i].style.display="";
			}else{
				tr[i].style.display="none";
			}
		}
	}
}

结果：

还可以利用element-ui组件完成。正好今天就是学习使用element-ui组件，谈谈我的学习成果：

1.引入element

npm i element-ui -S

2.main.js引入

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import 'element-ui/lib/theme-chalk/index.css';//引入点1
import ElementUI from 'element-ui';//引入点2

Vue.config.productionTip = false
Vue.use(ElementUI);//引入点3

new Vue({
    el: '#app',
    render: h => h(App),
    router
}).$mount('#app')

3.根据需要copy组件库

<template>
	<div>
		 <el-table
		    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
		    style="width: 100%">
		    <el-table-column
		      label="Date"
		      prop="date">
		    </el-table-column>
		    <el-table-column
		      label="Name"
		      prop="name">
		    </el-table-column>
		    <el-table-column
		      align="right">
		      <template slot="header" slot-scope="scope">
		        <el-input
		          v-model="search"
		          size="mini"
		          placeholder="输入关键字搜索"/>
		      </template>
		      <template slot-scope="scope">
		        <el-button
		          size="mini"
		          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
		        <el-button
		          size="mini"
		          type="danger"
		          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
	</div>
</template>

<script>
	 export default {
	    data() {
	      return {
	        tableData: [{
	          date: '2016-05-02',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1518 弄'
	        }, {
	          date: '2016-05-04',
	          name: '张三',
	          address: '上海市普陀区金沙江路 1517 弄'
	        }, {
	          date: '2016-05-01',
	          name: '李四',
	          address: '上海市普陀区金沙江路 1519 弄'
	        }, {
	          date: '2016-05-03',
	          name: '王五',
	          address: '上海市普陀区金沙江路 1516 弄'
	        }],
	        search: ''
	      }
	    },
	    methods: {
	      handleEdit(index, row) {
	        console.log(index, row);
	      },
	      handleDelete(index, row) {
	        console.log(index, row);
	      }
	    },
	  }
</script>

<style>
</style>

结果展示：