鍍金池/ 問答/HTML/ 請(qǐng)問一下前端啊查詢問題。

請(qǐng)問一下前端啊查詢問題。

是這樣的，公司需要拿個(gè)假頁(yè)面html去展示一下，這里面有表格的查詢功能，我該怎么寫查詢呢，如下圖。

   $(function(){
    var dataTable = [
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'},
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'},
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'},
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'}
    ];


     var str = "";
     str += "<tbody'>";
        for (var i = 0; i < dataTable.length;i++){
            str += "<tr>";   
            str+="<td>"+dataTable[i].batteryCode+"</td>";
            str+="<td>"+dataTable[i].battreyV+"</td>"
            str+="<td>"+dataTable[i].circleLine+"</td>"
            str+="<td>"+dataTable[i].batteryType+"</td>"
            str+="<td>"+dataTable[i].showTime+"</td>"
            str+="<td>"+dataTable[i].dealTime+"</td>"
            str+="<td>"+dataTable[i].operator+"</td>"
            str+="<td>"+dataTable[i].resul+"</td>"
            str+="<td>"+dataTable[i].dealLate+"</td>"
            str += "</tr>";
        }
    str += "</tbody>";
    $('.inner_tab').append(str)


    })

圖片描述

回答
編輯回答
執(zhí)念
模糊搜索嗎?
還是什么? 具體描述下需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
tr>td{
    padding: 5px 10px;
}    
</style>
</head>
<body>
<input type="text" class="searchText">
<button class="getSearch">查詢</button>
<div class="inner_tab">
    
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

        var dataTable = [
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'},
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'},
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'},
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'鏈路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模組檢測(cè)發(fā)現(xiàn)V14極耳虛焊','dealLate':'是'}
        ];

        
        $('.getSearch').click(function(){
            $('table').remove()
            let msg = $('.searchText').val()
            let searchTarget = []
            dataTable.map(e=>{
                if(e.batteryCode == msg){
                    searchTarget.push(e)
                }
            })
            let str = "";
            str += "<table>";
                for (var i = 0; i < searchTarget.length;i++){
                    str += "<tr>";   
                    str+="<td>"+dataTable[i].batteryCode+"</td>";
                    str+="<td>"+dataTable[i].battreyV+"</td>"
                    str+="<td>"+dataTable[i].circleLine+"</td>"
                    str+="<td>"+dataTable[i].batteryType+"</td>"
                    str+="<td>"+dataTable[i].showTime+"</td>"
                    str+="<td>"+dataTable[i].dealTime+"</td>"
                    str+="<td>"+dataTable[i].operator+"</td>"
                    str+="<td>"+dataTable[i].resul+"</td>"
                    str+="<td>"+dataTable[i].dealLate+"</td>"
                    str += "</tr>";
                }
            str += "</table>";
            $('.inner_tab').append(str)
        })

        


    
</script>
</body>
</html>
2017年11月30日 08:33
編輯回答
淡墨

clipboard.png

2017年7月12日 14:53
編輯回答
傻叼

鑒于你表格已經(jīng)生成完了，$("table tr").html()字符串模糊匹配，不匹配的行都display：none吧

2017年7月26日 21:18
編輯回答
乞許
dataTable.filter(item => {  
    return item.operator.indexOf('金')>-1;
})

//篩選`operator`字段包含搜索關(guān)鍵詞的數(shù)組
2017年4月25日 08:16