js基础 - 查找/忽略大小 - 查找/模糊查询 - 查找/多关键字 - 查找/筛选 - 查找
2017-04-24 14:55
465 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="text" value="输入需要查找的人名" id="studentName" />
<input type="button" value="基础 - 查找" id="search1" />
</div>
<div>
<input type="text" id="studentName2" />
<input type="button" value="忽略大小 - 查找" id="search2" onclick="demo02()" />
</div>
<div>
<input type="text" id="studentName3" />
<input type="button" value="模糊查询 - 查找" id="search3" onclick="demo03()" />
</div>
<div>
<input type="text" id="studentName4" />
<input type="button" value="多关键字 - 查找" id="search4" onclick="demo04()" />
</div>
<div>
<input type="text" id="studentName5" />
<input type="button" value="筛选 - 查找" id="search5" onclick="demo05()" />
</div>
<table border="1" width="500">
<thead align="center" <tr>
<td>学号</td>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>总分</td>
<td>操作</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>小明</td>
<td>100</td>
<td>100</td>
<td>200</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>90</td>
<td>60</td>
<td>150</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>59</td>
<td>80</td>
10463
<td>139</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>80</td>
<td>85</td>
<td>165</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>赵六</td>
<td>56</td>
<td>40</td>
<td>96</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Victor</td>
<td>78</td>
<td>88</td>
<td>166</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Alexander</td>
<td>90</td>
<td>96</td>
<td>186</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>Amanda</td>
<td>96</td>
<td>99</td>
<td>195</td>
<td></td>
</tr>
</tbody>
</table>
</body>
<script>
function demo01() {
var oStudentNameTag = document.getElementById('studentName');
var sHint = '输入需要查找的人名'; // 文本框的提示文案
// 添加focus事件，当点击文本框如果是提示内容把提示内容删除
oStudentNameTag.onfocus = function() {
// 如果是提示文本，把文本删除
if (this.value == sHint) {
this.value = '';
}
};
// 添加blur事件，如果用户没有输入内容，复恢提示文本
oStudentNameTag.onblur = function() {
if (this.value.trim() == '') {
this.value = sHint;
}
};
// 0. 绑定按钮的点击事件
document.getElementById('search1').onclick = function() {
// 1. 得到用户输入的名字
var sSearchText = oStudentNameTag.value;
// 2. 获取到tbody
var oTbodyies = document.getElementsByTagName('table')[0].tBodies[0];
// 3. 迭代tbody的rows
// 补充：如果是要做颜色相间，需要在这里调用一次设置背景色的函数
changeBackgroundColor();
for (var i = 0; i < oTbodyies.rows.length; i++) {
// 4. 迭代过程检查姓名的内容是否与输入的内容一致
if (oTbodyies.rows[i].cells[1].innerHTML == sSearchText) {
// 5. 如果是一致将当前行的背景色进行修改
oTbodyies.rows[i].style.backgroundColor = 'lightyellow';
}/*else{
oTbodyies.rows[i].style.backgroundColor = '';
}*/
}
};
}
/**
* 忽略大小的查找实现
*/
function demo02(){
// 1. 得到用户输入的信息
var sSearchText = document.getElementById('studentName2').value;
// 2. 得到tbody
var oTbody = document.getElementsByTagName('table')[0].tBodies[0];
// 3. 恢复原有的背景色
changeBackgroundColor();
// 4. 迭代tbody下的rows(tr)
for (var i=0;i<oTbody.rows.length;i++){
// 5. 迭代过程中检查td的内容是否与输入的内容一致
//if (oTbody.rows[i].cells[1] == sSearchText){} // 区分大小写的
// 统一把用户输入的和已有数据都转换为小写(大写)
// 查找的文本应该是在获取时做转换，如果是在循环中转换每迭代一次都要做一次转换，效率不高.
if (oTbody.rows[i].cells[1].innerHTML.toLowerCase() == sSearchText.toLowerCase()){
// 6. 是，修改行rows的背景色
oTbody.rows[i].style.backgroundColor = '#CDB79E';
}
}
}
/**
* 模糊查找实现
*/
function demo03(){
// 1. 得到用户输入的信息
var sSearchText = document.getElementById('studentName3').value;
// 1.1 判断输入内容长度是否小于1，如果是不执行下面的代码
if (sSearchText.length < 1){
return; //return之后，就不会再执行后面的代码
}
// 2. 得到tbody
var oTbody = document.getElementsByTagName('table')[0].tBodies[0];
// 3. 恢复原有的背景色
changeBackgroundColor();
// 4. 迭代tbody下的rows(tr)
for (var i=0;i<oTbody.rows.length;i++){
// 5. 迭代过程中检查td的内容是否与输入的内容相近
// string.seach(文本) 查找文本出现的位置，如果返回-1表示查找不到内容。也可以使用indexOf，lastIndexOf这两个方法
if(oTbody.rows[i].cells[1].innerHTML.toLowerCase().search(
sSearchText.toLowerCase()) != -1){
// 6. 是，修改行rows的背景色
oTbody.rows[i].style.backgroundColor = '#CDB79E';
}
}
}
/**
* 多关键字，模糊查找实现
*/
function demo04(){
// 1. 得到用户输入的信息
var sSearchText = document.getElementById('studentName4').value;
// 1.1 判断输入内容长度是否小于1，如果是不执行下面的代码
if (sSearchText.length < 1){
return; //return之后，就不会再执行后面的代码
}
// 1.2 对输入的数据进行分隔，分隔符我们需要提前规约好
var aSearchTextes = sSearchText.split(' '); // 需要查找的文本内容
// 2. 得到tbody
var oTbody = document.getElementsByTagName('table')[0].tBodies[0];
// 3. 恢复原有的背景色
changeBackgroundColor();
// 4. 迭代tbody下的rows(tr)
for (var i=0;i<oTbody.rows.length;i++){
// 4.1 迭代查找条件的数组
for (var j=0;j<aSearchTextes.length;j++){
// 5. 迭代过程中检查td的内容是否与输入的内容相近
// string.seach(文本) 查找文本出现的位置，如果返回-1表示查找不到内容。也可以使用indexOf，lastIndexOf这两个方法
if(oTbody.rows[i].cells[1].innerHTML.toLowerCase().search(
aSearchTextes[j].toLowerCase()) != -1){
// 6. 是，修改行rows的背景色
oTbody.rows[i].style.backgroundColor = '#CDB79E';
}
}
}
}
/**
* 筛选 - 查找
*/
function demo05(){
// 1. 得到用户输入的信息
var sSearchText = document.getElementById('studentName5').value;
// 1.1 判断输入内容长度是否小于1，如果是不执行下面的代码
if (sSearchText.length < 1){
return; //return之后，就不会再执行后面的代码
}
// 1.2 对输入的数据进行分隔，分隔符我们需要提前规约好
var aSearchTextes = sSearchText.split(' '); // 需要查找的文本内容
// 2. 得到tbody
var oTbody = document.getElementsByTagName('table')[0].tBodies[0];
// 3. 迭代tbody下的rows(tr)
for (var i=0;i<oTbody.rows.length;i++){
// 3.0 先把行隐藏起来，通过后面的查找步骤，确认该行是否能显示
oTbody.rows[i].style.display = 'none';
// 3.1 迭代查找条件的数组
for (var j=0;j<aSearchTextes.length;j++){
// 4. 迭代过程中检查td的内容是否与输入的内容相近
// string.seach(文本) 查找文本出现的位置，如果返回-1表示查找不到内容。也可以使用indexOf，lastIndexOf这两个方法
if(oTbody.rows[i].cells[1].innerHTML.toLowerCase().search(
aSearchTextes[j].toLowerCase()) != -1){
// 5. 是，修改行rows的显示的样式，设置为block
if (window.ActiveXObject){ // 判断是否为IE
oTbody.rows[i].style.display = 'block';
}else{
oTbody.rows[i].style.display = 'table-row';
}
}
}
}
}
changeBackgroundColor(); // 设置表格的背景色相间
demo01();
function changeBackgroundColor(){
// 1. 得到table的tbodies
var oTbodies = document.getElementsByTagName('table')[0].tBodies[0];
// 2. 迭代所有的rows
for (var i=0;i<oTbodies.rows.length;i++){
// 3. 设置颜色
oTbodies.rows[i].style.backgroundColor =
i%2==0 ? '#E0EEE0' : '#EAEAEA';
}
}
//↑↓
</script>
<style>
/*div{display:inline-table}*/
</style>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 基础点(checkbox选中，时间大小，查询数组值，form重复提交)
- Mybatis模糊查询忽略大小小
- 模糊查询问题,按两个字段合并后的值查找
- js模糊查询 定位select 下拉框
- MySQL单表多关键字模糊查询的实现方法
- jquery 查找类似autoComplete 实现模糊查询
- ibatis基础（七）：模糊查询实体对象
- 如何在SQL模糊查询中忽略对大小写字符的处理
- 使用关键字对数组进行模糊查找；对一维字符串数组进行排序
- 模糊查询——忽略大小写小技巧
- SQL 语句中模糊搜索查询 LIKE 关键字
- SQL 模糊查询 模糊查找 字符串匹配
- 多字段模糊匹配关键字查询
- 如何查询Google忽略的关键字（常用字词和字符）
- 怎么样写一段高效，安全的sql查询代码---（很基础，但是大家很容易忽略的）
- MySQL单表多关键字模糊查询的实现方法
- 模糊查询的关键字
- 最有效率的“多字段模糊匹配关键字查询”的解决办法
- 【ZT】SQL实现多字段模糊匹配关键字查询
- winform实现combox控件自动匹配查找，模糊查询功能