<!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>
<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>
扫一扫
6235
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
