模糊查找（遍历数组）

<

!--样式-->

<style type="text/css">

    table{

        border-collapse: collapse;

         }

    th,td{

        width: 100px;

        height: 30px;

        border: 1px solid #000000;

        text-align: center;

        line-height: 30px;

        }

         </style>

<input type="text" id="text" />

<button id="btn">搜索</button>

<table id="table"></table>

<script type="text/javascript">

    //模糊查找的概念：就是在文本框中输入你要搜索内容的其中一个字符或多个字符，就会将含有输入字符的所有内容调出

    var text=document.getElementById("text");//获取文本框

    var btn=document.getElementById("btn");//获取按钮

    var table=document.getElementById("table");//获取表格

    var data=[

       {id:1001,icon:"img/1.png",name:"笔记本",num:1,price:10},

       {id:1002,icon:"img/2.png",name:"电脑",num:1,price:20},

       {id:1003,icon:"img/3.png",name:"记事本",num:1,price:30},

       {id:1004,icon:"img/4.png",name:"计算器",num:1,price:40},

       {id:1005,icon:"img/5.png",name:"订书机",num:1,price:50},

       {id:1006,icon:"img/6.png",name:"螃蟹",num:1,price:60},

       {id:1007,icon:"img/7.png",name:"毛蟹",num:1,price:70},

       {id:1008,icon:"img/8.png",name:"大虾",num:1,price:80},

       {id:1009,icon:"img/9.png",name:"皮皮虾",num:1,price:90},

       {id:1010,icon:"img/10.png",name:"龙虾",num:1,price:100}

       ];//定义数组

//数组的每一项元素都是一个对象

function getTable(arr){//写一个函数用来创建表格，放数组里面的内容

      var tr="<tr>";

      for(var str in arr[0]){

         tr+="<th>"+str+"</th>";//遍历某一行的属性名作为表头（以第一个元素为例）

         }

      tr+="</tr>";

         //遍历所有的元素将每个元素（即每个对象放在一行表格中）

      for(var i=0;i<arr.length;i++){

         tr+="<tr>";

         for(var str1 in arr[i]){//遍历每个对象的属性的值，放在表格中

             tr+="<td>"+arr[i][str1]+"</td>";

             }

             tr+="</tr>";

         }

         return tr;//返回行与列

        }

             //将数组中的内容以表格的形式呈现，将内容放在表格里面

      table.innerHTML=getTable(data);

         //点击按钮就会找到文本框中所含字的相应内容

     btn.addEventListener("click",clickHandler);

     function clickHandler(){

             var t=text.value;//获取到文本框中输入的内容

             var list=data.filter(function (item) {//利用filter具有筛选和截取的作用，筛选出数组中name值与文本框输入内容是否有相同的字

              return item.name.indexOf(t)>-1;//索引name

           });

           table.innerHTML=getTable(list);//把含有与文本框中输入字相同name的那一个元素放在表格中

         }

         </script>