兼容ie8的Html+Css+Js
2024-09-18 21:30:01
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>
最新文章
- iOS开发系列--Swift进阶
- 支持同步滚动的RichTextbox控件
- 使用Xcode6.1.1打包出现Your account already has a valid iOS Distribution certificate问题
- Saving structured data with json
- Project Euler 104:Pandigital Fibonacci ends 两端为全数字的斐波那契数
- SelectedValue,SelectedValuePath,SelectedValueBinding,DisplayMemberPath讲解
- 局域网内Linux服务器时间同步
- myeclipse6.0下载及注冊码
- MapReduce中的排序
- OCA读书笔记(17) - 移动数据
- tomcatserver乱码问题,tomcat与数据库之间的编码统一转换
- highcharts柱状图和饼图的数据填充
- 64位Kali无法顺利执行pwn1问题的解决方案
- stark组件的分页，模糊查询，批量删除
- Ubuntu安装Sqlite报错:No module named 'ConfigParser'
- USACO Section 1.4 Mother's Milk 解题报告
- Fragment的setUserVisibleHint方法实现懒加载，但setUserVisibleHint 不起作用？
- 安装Nginx+Tomcat
- POJ 1222 EXTENDED LIGHTS OUT（高斯消元解XOR方程组）
- .NET基金会成立
热门文章
- 国内“谁”能实现chatgpt，短期穷出的类ChatGPT简评（算法侧角度为主），以及对MOSS、ChatYuan给出简评，一文带你深入了解宏观技术路线。
- 题解 [SCOI2008] 奖励关
- 我有一篇Java Stream使用手册，学了就是你的了！
- Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
- Oracle中表字段加中文注释，应该怎么写呢？
- gcc 内联汇编简介
- pycharm软件基本使用python语法的注释变量的使用常量的使用变量的命名规范python的优化垃圾回收机制数据类型
- zabbix-agent2安装问题汇总
- uni-app (uView) select下拉框添加模糊搜索
- vue框架2