兼容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,不就可以了吗?是的, ...
随机推荐
- docker-compose部署rocketmq
docker-compose安装: 1.从github上下载docker-compose二进制文件安装 Ubuntu下载docker-compose文件 sudo curl -L https://gi ...
- ABP微服务系列学习-搭建自己的微服务结构（一）
在原本的结构里面,由于默认服务引用的都是ABP原生的模块,所以结构目录里面没有包含modules目录,这里我们添加一个modules目录,用于存放我们的自定义模块.在shared里面,我们再抽一个Ev ...
- linux 信号 未决信号集和屏蔽信号集
有的地方,将屏蔽又叫阻塞? 在虚拟地址空间中,内核区的PCB中 有两个64位的值(集合),分别表示64个信号的未决状态(未被处理)和屏蔽与否 kill -l 可以查看linux中的所有信号,共64个 ...
- 代数余子式的由来/代数余子式为什么-1的系数是ⁱ⁺ʲ?/证明一个n阶行列式，如果其中第i行（或第j列）所有元素除aᵢⱼ外都为零，那么这行列式等于aᵢⱼ与它的代数余子式的乘积/证明行列式按行（列）展开法则：n（n>1）阶行列式等于它任意一行（列）的所有元素与它们对应的代数余子式的乘积的和。
代数余子式的由来/代数余子式为什么-1的系数是ⁱ⁺ʲ?/证明一个n阶行列式,如果其中第i行(或第j列)所有元素除aᵢⱼ外都为零,那么这行列式等于aᵢⱼ与它的代数余子式的乘积/证明行列式按行(列)展开法 ...
- 阿里云oss初使用
一.购买 二.配置RAM权限 https://ram.console.aliyun.com/users 1.创建用户 2.创建完成后注意获取AccessKey ID.AccessKey Secret( ...
- antdVue 重置select和input的样式 去掉蓝色换成灰色
代码实现: <template> <div> <a-select mode="tags" style="width: 200px" ...
- java链接pg数据库remaining connection slots are reserved for non-replication superuser connections问题
最近遇到链接pg数据库报错:remaining connection slots are reserved for non-replication superuser connections.百度说, ...
- CVE-2013-2566 SSL/TLS RC4 信息泄露漏洞 修复方案
详细描述 安全套接层(Secure Sockets Layer,SSL),一种安全协议,是网景公司(Netscape)在推出Web浏览器首版的同时提出的,目的是为网络通信提供安全及数据完整性.SSL在 ...
- Unity ARCore动态增加识别图
项目需要,有两点要求说明一下 1.如果你的图片是下载生成的,那没什么问题 2.如果你的识别图是存储在APK包里的话需要调整图片属性: 代码如下: using QFramework; using Sys ...
- 前端使用xlsx file-saver xlsx-style导出
import FileSaver from 'file-saver' import XLSXStyle from "xlsx-style"; import XLSX from 'x ...