1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>表格生成以及查询</title> 9 </head> 10 11 <body> 12 <script type="text/javascript"> 13 // 开始折磨 14 </script> 15 <div id="root" class="contant"> 16 <div class="header"> 17 <div class="left fl"> // fl:ie8不兼容flex布局，所以都用float 和定位 18 <div class="search-danwei-text fl"> 19 按单位查询 20 </div> 21 <div class="search-danwei fl"> 22 <div class="search-danwei-con fl" id="search-danwei-con"> //此处为自定义下拉框搜索 因为ie8的兼容性问题，就去掉了自定义的滚动条 23 --请选择单位-- 24 </div> 25 <image id="search-danwei-btn" class="search-danwei-btn fl"src="" /> // 此程序为单文件程序，所以图片用base64格式，ie8可能不能使用background-image 所以用image 再定位，层级 27 <div class="search-danwei-item-wrap" id="search-danwei-item-wrap"> //在此处循环创建 子元素 ，并绑定点击事件 ， ie8 不能兼容鼠标经过离开事件 ， 所以去掉了鼠标经过和离开改变当前元素的样式 28 29 </div> 30 </div> 31 </div> 32 33 <div class="right fl"> 34 <div class="search-quit-input fl"> 35 <input id="inputQuit" class="input fl" type="text" /> 36 <div class="search-quit-btn fl"> 37 <span class="pr-search-btn" id="pr-search-btn">快速查询</span> //此处为模糊查询 38 <image class="search-quit-btn-bg fl"src="" /> 40 </div> 41 42 </div> 43 </div> 44 </div> 45 <table cellspacing='0'> // 定义表格为单线表 46 <thead>//表格头部 47 <tr> 48 <th>单位</th> 49 <th>姓名</th> 50 <th>职务</th> 51 <th>内线</th> 52 <th>外线</th> 53 <th>手机</th> 54 <th>警务通</th> 55 </tr> 56 </thead> 57 <tbody>//表格体 主要在此处添加行 58 </tbody> 59 </table> 60 </div>
1 <script type="text/javascript">
2 // 添加indexof方法
3 if (!Array.prototype.indexOf) {
4 Array.prototype.indexOf = function (elt /*, from*/) {
5 var len = this.length >>> 0;
6 var from = Number(arguments[1]) || 0;
7 from = (from < 0)
8 ? Math.ceil(from)
9 : Math.floor(from);
10 if (from < 0)
11 from += len;
12
13 for (; from < len; from++) {
14 if (from in this && this[from] === elt)
15 return from;
16 };
17 return -1;
18 };
19 };
20 // 定义数据
21 var personData = [
22 {
23 danwei: "办公室",
24 name: "",
25 zhiwu: "",
26 neixian: "",
27 waixian: "6180617",
28 phonenum: "",
29 jingwutong: ""
30 },
31 {
32 danwei: "交警大队",
33 name: "亢文彬",
34 zhiwu: "副大队长",
35 neixian: "",
36 waixian: "",
37 phonenum: "15831678777",
38 jingwutong: "17803363185"
39 }];
40 // 将原数据备份，用来渲染
41 var lastResult = personData;
42 // 创建表格体结构的方法
43 function creatTableBody() {
44 var tbody = document.querySelector('tbody');
45 for (var i = 0; i <= lastResult.length; i++) {
46 //（1）创建行
47 var tr = document.createElement('tr');
48 tbody.appendChild(tr);
49 //（2）行里面创建单元格td 单元格属性取决于每个对象里面的属性的个数
50 for (k in lastResult[i]) {
51 //创建单元格
52 var td = document.createElement('td');
53 td.innerHTML = lastResult[i][k];
54 tr.appendChild(td); //每个方法都用的小心翼翼
55 };
56 };
57 };
58 creatTableBody();
59
60
61 // 定义单位选项的数据，为数据格式;
62 var searchDanweiArr = ['--请选择单位--'];
63 // 获取下拉菜单父盒子;
64 var searchContent = document.getElementById('search-danwei-item-wrap');
65 // 循环获取单位选项的数据中的单位信息，
66 for (var k = 0; k < lastResult.length; k++) {
67 if (searchDanweiArr.indexOf(lastResult[k].danwei) < 0) {
68 searchDanweiArr.push(lastResult[k].danwei);
69 };
70 };
71 // searchContent创建子元素节点
72 for (var i = 0; i < searchDanweiArr.length; i++) {
73 var newP = document.createElement('p');
74 newP.innerHTML = searchDanweiArr[i];
75 searchContent.appendChild(newP);
76 }
77 // 获取下拉菜单按钮
78 var searchDanweiBtn = document.getElementById('search-danwei-btn');
79 // 显示下拉菜单的点击事件
80 searchDanweiBtn.onclick = function () {
81 // searchContent.style.left = "-221px";
82 searchContent.style.display = "block";
83 };
84 // 获取下拉菜单子盒子，下拉菜单的每一项， 获取结果为一个数组
85 var searchItem = searchContent.querySelectorAll('p');
86 // 是否为IE浏览器
87 var ISIE = true;
88 //判断是否IE浏览器
89 function isIE() {
90 if (!!window.ActiveXobject || "ActiveXObject" in window) {
91 ISIE = 8;
92 } else {
93 ISIE = 0;
94 };
95 };
96 // 删除表格 每次重新渲染时调用
97 function deleteChild() {
98 isIE()
99 var tbody = document.querySelector('tbody');
100 var first = tbody.firstElementChild;
101
102 if (ISIE == 8) {
103 while (first) {
104 first.removeNode(true);
105 first = tbody.firstElementChild;
106 }
107 } else {
108 while (first) {
109 first.remove();
110 first = tbody.firstElementChild;
111 };
112 };
113 };
114 // 搜索函数，每次点击事件发生时调用 我滴妈 不说了我去力扣呆一会
115 function searchSearch() {
116 var arr = [];
117 if (searchQuitText && searchDanweiText) {
118 var value1 = searchQuitText;
119 var value2 = searchDanweiText;
120
121 for (var j = 0; j < personData.length; j++) {
122 if ((personData[j].danwei.indexOf(value1) >= 0
123 || personData[j].zhiwu.indexOf(value1) >= 0
124 || personData[j].name.indexOf(value1) >= 0
125 || personData[j].waixian.indexOf(value1) >= 0
126 || personData[j].neixian.indexOf(value1) >= 0
127 || personData[j].phonenum.indexOf(value1) >= 0
128 || personData[j].jingwutong.indexOf(value1) >= 0
129 ) && (
130 personData[j].danwei.indexOf(value2) >= 0
131 || personData[j].zhiwu.indexOf(value2) >= 0
132 || personData[j].name.indexOf(value2) >= 0
133 || personData[j].waixian.indexOf(value2) >= 0
134 || personData[j].neixian.indexOf(value2) >= 0
135 || personData[j].phonenum.indexOf(value2) >= 0
136 || personData[j].jingwutong.indexOf(value2) >= 0)
137 ) {
138 arr.push(personData[j]);
139 lastResult = arr;
140 } else {
141 lastResult = arr;
142 };
143 };
144 creatTableBody();
145
146 } else if (searchQuitText || searchDanweiText) {
147 var value = searchQuitText ? searchQuitText : searchDanweiText
148 for (var i = 0; i < personData.length; i++) {
149 if (personData[i].danwei.indexOf(value) >= 0
150 || personData[i].zhiwu.indexOf(value) >= 0
151 || personData[i].name.indexOf(value) >= 0
152 || personData[i].waixian.indexOf(value) >= 0
153 || personData[i].neixian.indexOf(value) >= 0
154 || personData[i].phonenum.indexOf(value) >= 0
155 || personData[i].jingwutong.indexOf(value) >= 0) {
156 arr.push(personData[i])
157 lastResult = arr;
158 } else {
159 lastResult = arr;
160 }
161 }
162 creatTableBody();
163 // }
164 } else {
165 lastResult = personData;
166 creatTableBody();
167 };
168 if (searchDanweiText == '--请选择单位--') {
169
170 lastResult = personData;
171 inputText.value='';
172 creatTableBody();
173 };
174 };
175 // 获取单位搜索文字盒子
176 var searchDanweiCon = document.getElementById('search-danwei-con');
177 for (var i = 0; i < searchItem.length; i++) {
178 (function (j) { // 这个函数很有必要
179 searchItem[j].onclick = function () {
180 className = 'bgBlue';
181 searchContent.style.display = "none";
182 searchDanweiCon.innerText = searchItem[j].innerText;
183 searchDanweiText = searchItem[j].innerText;
184 deleteChild();
185 searchSearch();
186 };
187 // searchItem[j].addEventListener('mouseover', function () { className = 'bgBlue' })
188 // searchItem[j].addEventListener('mouseout', function () { className = 'search-danwei-item' })
189 })(i)
190 };
191
192
193
194 // 获取快速搜索按钮
195 var quitSearch = document.getElementById('pr-search-btn');
196 // 获取快速搜索输入框
197 var inputText = document.querySelector('input');
198 // 定义选定单位的文字内容
199 var searchDanweiText = '';
200 // 定义快速搜索内容
201 var searchQuitText = '';
202 quitSearch.onclick = function () {
203 searchQuitText = inputText.value;
204 deleteChild();
205 searchSearch();
206 };
207
208 </script>
标签：ie8,indexOf,value,Js,Html,value2,var,lastResult,personData From： https://www.cnblogs.com/changshu/p/16861444.html