JavaScript 表格搜索

格搜索

要求的功能:基礎(chǔ)版本——字符串比較忽略大小寫——大小寫轉(zhuǎn)換模糊搜索——search的使用多關(guān)鍵詞——split 高亮顯示、篩選

符合百度搜索的要求

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
        var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var sTxt=oTxt.value.toLowerCase();

        var arr=sTxt.split(' ');

        oTab.tBodies[0].rows[i].style.display='none';

        for(var j=0;j<arr.length;j++){
        if(sTab.search(arr[j])!=-1){
        oTab.tBodies[0].rows[i].style.display='block';
        }
        }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

以下為簡(jiǎn)單版本

版本1：基礎(chǔ)版本——字符串比較

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value){
            		oTab.tBodies[0].rows[i].style.background='yellow';
            }
            else{
            		oTab.tBodies[0].rows[i].style.background='';
            }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

版本2:忽略大小寫——大小寫轉(zhuǎn)換

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
            var sTxt=oTxt.value;
            if(sTab.toLowerCase()==sTxt.toLowerCase()){
            oTab.tBodies[0].rows[i].style.background='yellow';
            }
            else{
            oTab.tBodies[0].rows[i].style.background='';
            }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

版本3：模糊搜索——search的使用

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function (){
    var oTab=document.getElementById('tab1');
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sTxt=oTxt.value.toLowerCase();
            if(sTab.search(sTxt)!=-1){
            oTab.tBodies[0].rows[i].style.background='yellow';
            }
            else{
            oTab.tBodies[0].rows[i].style.background='';
            }
        }
    };
};
</script>
</head>
<body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

版本4：多關(guān)鍵詞——split

php js jquery功能片段#

唯一需求：表格id。

注意：因提交數(shù)據(jù)不能包含\n，所以要替換。呈現(xiàn)時(shí)可以替換回?fù)Q行符。

/**

* 遍歷表格內(nèi)容后返回?cái)?shù)組

* @param string id 表格id

* @return Array 或者JSON

function getTableContent(id) {

var mytable=document.getElementById(id);

var data=[];

var tmpTxt;

for(var i=0, rows=mytable.rows.length; i < rows; i++) {

for(var j=0, cells=mytable.rows[i].cells.length; j < cells; j++) {

if(!data[i]) {

data[i]=new Array();

}

tmpTxt=mytable.rows[i].cells[j].innerHTML;

//tmpTxt=tmpTxt.replace(/<[^>]+>/gi,'');//過濾全部的html標(biāo)簽，不包括內(nèi)容

//tmpTxt=tmpTxt.replace(/\s/gi,'');

tmpTxt=tmpTxt.replace(/\n/gi,'<br>');

//data[i][j]=tmpTxt;

data[i][j]=tmpTxt.replace(/　/g, ""); //替換全角空格

}

//var JSONdata=data;

var JSONdata=JSON.stringify(data); //序列化數(shù)組JSON.stringify(data) 反序列化數(shù)組JSON.parse(data)

return JSONdata;

//return data;//返回?cái)?shù)組

}

</script>

TableHeader 對(duì)象

TableHeader 對(duì)象表示一個(gè) HTML <th> 元素。

訪問 TableHeader 對(duì)象

您可以使用 getElementById() 來訪問 <th> 元素：

var x=document.getElementById("myTh");

提示：您也可以通過搜索表單的 cells 集合來訪問 TableHeader 對(duì)象。

創(chuàng)建 TableHeader 對(duì)象

您可以使用 document.createElement() 方法來創(chuàng)建 <th> 元素：

var x=document.createElement("TH");

TableHeader 對(duì)象屬性

屬性	描述
abbr	設(shè)置或返回 abbr 屬性的值。
align	HTML5 中不支持。使用 style.textAlign 替代。設(shè)置或返回?cái)?shù)據(jù)單元格中內(nèi)容的水平對(duì)齊方式。
axis	HTML5 中不支持。設(shè)置或返回一個(gè)用逗號(hào)分隔的相關(guān)數(shù)據(jù)單元格的列表。
background	HTML5 中不支持。使用 style.background 替代。設(shè)置或返回?cái)?shù)據(jù)單元格的背景圖像。
bgColor	HTML5 中不支持。使用 style.backgroundColor 替代。設(shè)置或返回表格的背景顏色。
ch	HTML5 中不支持。設(shè)置或返回?cái)?shù)據(jù)單元格根據(jù)的對(duì)齊字符。
chOff	HTML5 中不支持。設(shè)置或返回 ch 屬性的水平偏移。
colSpan	設(shè)置或返回 colspan 屬性的值。
headers	設(shè)置或返回 headers 屬性的值。
height	HTML5 中不支持。使用 style.height 替代。設(shè)置或返回?cái)?shù)據(jù)單元格的高度。
noWrap	HTML5 中不支持。使用 style.whiteSpace 替代。設(shè)置或返回單元格中的內(nèi)容是否折行。
rowSpan	設(shè)置或返回 rowspan 屬性的值。
vAlign	HTML5 中不支持。使用 style.verticalAlign 替代。設(shè)置或返回單元格中內(nèi)容的垂直對(duì)齊方式。
width	HTML5 中不支持。使用 style.width 替代。設(shè)置或返回?cái)?shù)據(jù)單元格的寬度。

標(biāo)準(zhǔn)屬性和事件

TableHeader 對(duì)象同樣支持標(biāo)準(zhǔn) 屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：2022 年前端工程師學(xué)習(xí)路線圖（完整版）
下一篇：CSS樣式更改-文本Content

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript 表格搜索

您的項(xiàng)目需求