兼容ie8的Html+Css+Js
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的Html+Css+Js的更多相关文章
- bootstrap 兼容 IE8
在 html 中引用 <!-- bootstrap 兼容 IE8 --> <script src="../../jsapi/js/html5shiv.min.js" ...
- css+js整站变灰（兼容IE7+）
原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- Css实现透明效果，兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
- js跨域传值,兼容ie8以上
js跨域传值,兼容ie8以上 事先说明,此方法并不支持ie8,如果想要支持ie8的话,需要用这种思路(来自微软): if (window.addEventListener) { window.addE ...
- css 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- js插件实现点击复制内容到粘贴板，兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
- css 完美垂直居中解决方案兼容ie8以上等其他浏览器
css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...
- 解决video.js不兼容ie8问题
使用视频播放器的时候,常常会让兼容一些浏览器问题,比如兼容ie8浏览器.在工作中使用的是video.js. 如果需要兼容,引入两个js库,就可以做到兼容ie8浏览器 <script src=&q ...
- css将两个元素水平对齐，兼容IE8
css实现元素水平对齐 css实现水平对齐,如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的, ...
随机推荐
- SX【2020.01.09】NOIP提高组模拟赛(day1)
[2020.01.09]NOIP提高组模拟赛(day1) 这次考得不理想,只做了前两题,后两题没时间做,说明做题速度偏慢. source : 100 + 20 + 0 + 0 = 120 rank7 ...
- 花10几元买ESP32-C3，体验一下MicroPython (和CircuitPython)
ESP32是近年很火的国产低成本MCU系列. 买了芯片ESP32-C3的模组安信可 ESP-C3-32S的开发板安信可 NodeMCU ESP-C3-32S-Kit .开发板很小,没有任何多余的东西, ...
- Angular ngx-translate 国际化实践（中文转英文）
1.安装包 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 2.根模块app. ...
- ps4双手柄inputManager设置
ps4键位 https://blog.csdn.net/egostudio/article/details/51463819 xbox键位 http://www.360doc.com/content/ ...
- 关于cnpm的卸载与重装
1.卸载原有旧的版本: npm uninstall -g cnpm --registry=https://registry.npm.taobao.org 2.注册模块镜像: npm set regis ...
- SystemVerilog Tutorial
来自网站 1.网站说明-tutorial This SystemVerilog tutorial is written to help engineers with background in Ver ...
- 解决React 安装 antd 后出现的Module not found: Can't resolve './locale' in '...rc-picker/node-modules.....'一系列问题问题
最近看到很多小伙伴发现了antd的这个问题,试用了网上的办法不行,我自己想了一种可行的方法,大家可以试一试. 有位大佬用了yarn eject 方式 ,通过暴露config配置,在config.web ...
- flannel 关闭SNAT
flannel 关闭SNAT 默认情况下,flannel 访问集群外网络是通过 SNAT 成宿主机 ip 方式,在一些金融客户环境中为了能实现防火墙规则,需要直接针对 POD ip 进行进行规则配置, ...
- ABAP 拆批拣货交货bapi以及实例
使用函数 BAPI_OUTB_DELIVERY_CHANGE:拆批bapi WS_DELIVERY_UPDATE:拣货函数 BAPI_OUTB_DELIVERY_CONFIRM_DEC:过账函数 样例 ...
- replace 常用积累
1.替换有,或者.为: obj.keyword.replace(/,|./g,';') 2.替换元素标签类似于<em>文字</em>这种 let name=item.name. ...