兼容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,不就可以了吗?是的, ...
随机推荐
- sqllabs:less18-22
在利用抓包工具进行抓包的时候,我们能看到很多的项,下面详细讲解每一项. HTTP 头部详解 1. Accept:告诉 WEB 服务器自己接受什么介质类型,/ 表示任何类型,type/* 表示该类型下的 ...
- CentOS7一键安装RPM版LNMP（NGINX+PHP+MySQL）环境
转载:简书 CentOS7一键安装RPM版LNMP(NGINX+PHP+MySQL)环境 - 简书 (jianshu.com) (需要配置nginx.conf文件) 转载:csdn (35条消息) V ...
- mysql的双1设置是什么？
innodb_flush_log_at_trx_commit和sync_binlog 两个参数是控制MySQL磁盘写入策略以及数据安全性的关键参数.如果innodb_flush_log_at_trx_ ...
- ImGui渲染3d数据的方法
ImGui本质上是个2d渲染引擎,渲染3d数据只能另辟蹊径.目前主要有3种方法: 一是2d转换,可以自己处理3维坐标向屏幕坐标的转换,然后调用ImGui的二维绘制函数进行渲染: 二是3d贴图,首先在3 ...
- B站【挽救小白第一季】前端代码记录笔记
1. 新建工程命令: $ vue init mpvue/mpvue-quickstart my-project 参考mpvue官方快速入门:http://mpvue.com/mpvue/quickst ...
- Vulnhub:Player-v1.1靶机
kali:192.168.111.111 靶机:192.168.111.178 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...
- 在orangepi 3 lts使用high speed timer
概述 在allwin H6的用户手册上可以发现全志H6芯片支持普通计时器和高速计时器. 普通计时器可以处理低频定时任务,其时钟源包括LOSC和OSC,前者频率为32768Hz,后者为24MHz. 高数 ...
- Notepad++来比较文件
使用Notepad++来比较文件_sanqima的专栏-CSDN博客_notepad比较文件https://blog.csdn.net/sanqima/article/details/50467154
- 【yum】使用新的centos 6.9系统时，遇到的Yum问题
1,不识别域名 vi /etc/yum.conf 新增: nameserver 1.1.1.1(根据实际配置) 2,Header V3 RSA/SHA256 Signature, key ID 060 ...
- Spark应用程序第三方jar文件依赖解决方案
第一种方式 操作:将第三方jar文件打包到最终形成的spark应用程序jar文件中 应用场景:第三方jar文件比较小,应用的地方比较少 第二种方式 操作:使用spark-submit提交命令的参数: ...