模板页面:
<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的一串儿信息,并且隐藏其它信息。
感谢回答~!