整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 表格搜索

JavaScript 表格搜索

格搜索

要求的功能:基础版本——字符串比较 忽略大小写——大小写转换 模糊搜索——search的使用 多关键词——split 高亮显示、筛选

符合百度搜索的要求

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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>

以下为简单版本

版本1:基础版本——字符串比较

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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:忽略大小写——大小写转换

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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>无标题文档</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:多关键词——split

php js jquery功能片段#

唯一需求:表格id。

注意:因提交数据不能包含\n,所以要替换。呈现时可以替换回换行符。

<script type="text/javascript">

/**

* 遍历表格内容后返回数组

* @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标签,不包括内容

//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); //序列化数组JSON.stringify(data) 反序列化数组JSON.parse(data)

return JSONdata;

//return data;//返回数组

}

</script>

TableHeader 对象

TableHeader 对象表示一个 HTML <th> 元素。

访问 TableHeader 对象

您可以使用 getElementById() 来访问 <th> 元素:

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

提示:您也可以通过搜索表单的 cells 集合来访问 TableHeader 对象。

创建 TableHeader 对象

您可以使用 document.createElement() 方法来创建 <th> 元素:

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

TableHeader 对象属性

属性描述
abbr设置或返回 abbr 属性的值。
alignHTML5 中不支持。使用 style.textAlign 替代。设置或返回数据单元格中内容的水平对齐方式。
axisHTML5 中不支持。设置或返回一个用逗号分隔的相关数据单元格的列表。
backgroundHTML5 中不支持。使用 style.background 替代。设置或返回数据单元格的背景图像。
bgColorHTML5 中不支持。使用 style.backgroundColor 替代。设置或返回表格的背景颜色。
chHTML5 中不支持。设置或返回数据单元格根据的对齐字符。
chOffHTML5 中不支持。 设置或返回 ch 属性的水平偏移。
colSpan设置或返回 colspan 属性的值。
headers设置或返回 headers 属性的值。
heightHTML5 中不支持。使用 style.height 替代。设置或返回数据单元格的高度。
noWrapHTML5 中不支持。使用 style.whiteSpace 替代。设置或返回单元格中的内容是否折行。
rowSpan设置或返回 rowspan 属性的值。
vAlignHTML5 中不支持。使用 style.verticalAlign 替代。设置或返回单元格中内容的垂直对齐方式。
widthHTML5 中不支持。使用 style.width 替代。设置或返回数据单元格的宽度。

标准属性和事件

TableHeader 对象同样支持标准 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!