问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问一下前端啊查询问题。

头像
菜鸟001
    266794187

    是这样的，公司需要拿个假页面html去展示一下，这里面有表格的查询功能，我该怎么写查询呢，如下图。

       $(function(){
    var dataTable = [
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模组检测发现V14极耳虚焊','dealLate':'是'},
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模组检测发现V14极耳虚焊','dealLate':'是'},
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模组检测发现V14极耳虚焊','dealLate':'是'},
        {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
        'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
        'operator':'曹海燕','resul':'模组检测发现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)


    })

    图片描述

    javascripthtmlcssnode.js
    阅读 2.7k
    4 个回答
    得票最新
    头像
    wlove
      6.9k3835
      ✓ 已被采纳
      模糊搜索吗?
      还是什么? 具体描述下需求
      <!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':'模组检测发现V14极耳虚焊','dealLate':'是'},
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模组检测发现V14极耳虚焊','dealLate':'是'},
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模组检测发现V14极耳虚焊','dealLate':'是'},
            {'batteryCode':'S16030116','battreyV':'107','circleLine':'75%',
            'batteryType':'链路故障','showTime':'2018-3-12','dealTime':'2018-4-12',
            'operator':'曹海燕','resul':'模组检测发现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>
      头像
      橘南枳北
        1.5k71429
        dataTable.filter(item => {  
    return item.operator.indexOf('金')>-1;
})

//筛选`operator`字段包含搜索关键词的数组
        头像
        _usw
          3.8k2618

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

          头像
          菜鸟001
            266794187

            clipboard.png

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题