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的一串儿信息，并且隐藏其它信息。

感谢回答~！

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";
        }
    }
}

可以定义一个开关

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

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

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