weixin_58648225
2021-06-01 16:04
采纳率: 91.7%
浏览 46

laravel关于js实现的瞬时查询的问题

模板页面:

            <form action="" method="get" class="box-tools">
                <div class="box-tools">
                    <div class="input-group input-group-sm hidden-xs" style="width: 750px;">
                        <input type="text" name="table_search" id="myInput" onkeyup="myFunction()" placeholder="搜索" value="{{ request()->get('table_search','') }}" >

                {{--        <div class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </div>         --}}
                    </div>
                </div>
            </form>
            </div>
            <div class="box-body table-responsive no-padding">
                <table id="MyTable" class="table table-hover">
                    <tr>
                        <th>学生姓名</th>
                        <th>联系电话</th>
                        <th>缴费状态</th>
                        <th>星级</th>
                        <th>提醒</th>
                        <th>项目</th>
                        <th>项目类别</th>
                        <th>信息录入人</th>
                    </tr>
                    @foreach($data as $obj)
                    <tr>
                        <input type="hidden" name="student_id" value="{{ $obj->id }}">
                        <td><a href="#">{{ $obj->name }}</a></td>
                        <td><a href="#">{{ $obj->tel }}</a></td>
                        <td><a href="#">{{ $obj->payment_status_id }}</a></td>
                        <td><a href="#">{{ $obj->stat_lv }}</a></td>
                        <td><a href="#">{{ $obj->notification }}</a></td>
                        <td><a href="#">{{ $obj->project_id }}</a></td>
                        <td><a href="#">{{ $obj->project_type_id }}</a></td>
                        <td><a href="#">{{ $obj->user_id }}</a></td>
                        <td>
                            <a href="{{ $obj->id }}/detail" class="btn btn-xs btn-primary">详细/修改</a>
                            <a href="{{ $obj->id }}/delete" class="btn btn-xs btn-danger">删除</a>

                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
    </div>
</div>

 

js页面:

function myFunction() {

    var input, filter, table, td, a, b, c;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();   //转换大小写,不依赖ID查询的话好像没什么用
    table = document.getElementById("MyTable");
    td = table.getElementsByTagName('td');

    // 这里尝试循环一下
    for (b = 0; b < td.length; b++) {
        a = td[b].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            td[b].style.display = "";
            for (c = 0; c < td.length; c++) {
                td[c].style.display = "";
            }
        }
            else {
            td[b].style.display = "none";
        }
    }
}

 初学者搞了一个下午还是有所困难,如何实现查询时下方得出与VALUE相等的ID的一串儿信息,并且隐藏其它信息。

 

感谢回答~!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 已采纳
    function myFunction() {
    
        var input, filter, table, tr, a, b, c;
        input = document.getElementById('myInput');
        filter = input.value.toUpperCase();   //转换大小写,不依赖ID查询的话好像没什么用
        table = document.getElementById("MyTable");
        tr = table.getElementsByTagName('tr');
    
        // 这里尝试循环一下
        for (b = 1; b < tr.length; b++) {
            a = tr[b].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[b].style.display = "";
            }
            else {
                tr[b].style.display = "none";
            }
        }
    }
    
    1 打赏 评论
  • 颜人中是 2021-06-01 16:31

    可以定义一个开关

    1 打赏 评论
  • 有问必答小助手 2021-06-01 17:55

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    打赏 评论

相关推荐 更多相似问题