背景
最近在做项目的过程中，一个功能需要把表格的某一行数据显示高亮，通过学习和查阅资料查到一些方法。
正文
想要让某一行数据高亮，需要准备的数据：搜索框、搜索按钮，以及展示的表格。
<script> //实现功能,搜索显示,大小写搜索不会影响,模糊搜索 window.onload = function () { var otab = document.getElementById('dateTab');//要查询的表格 var obtn = document.getElementById('btnsearch');//查询按钮 var otext = document.getElementById('txtsearch');//输入框 obtn.onclick = function () { for (var i = 0; i < otab.tBodies[0].rows.length; i++) { var stab = otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var stext = otext.value.toLowerCase(); // toLowerCase()将英文全部转换成小写,为了用户在输入小写的时候仍然可以将内容搜索出来 var arr = stext.split(' '); //split的作用将某一段字符串按照指定字符进行切割 otab.tBodies[0].rows[i].style.background = "";//确保在下一次搜索时上一次搜索不会影响这次搜索的结果 for (var j = 0; j < arr.length; j++) { if (stab.search(arr[j]) != -1) { otab.tBodies[0].rows[i].style.background = 'yellow'; } } } } }
再设置出发点击按钮的时候需要执行的操作。
再设置表格内容，我这里设置了表格和数据库绑定，可以根据自己的需要设计表格。
<div id="camanager" class="round2"> <table class="m_table" id="dateTab"> <tr> <th class="auto-style1">id</th> <th class="auto-style1">教室名称</th> <th class="auto-style1">至少使用人数</th> <th class="auto-style1">会议开始前*分钟取钥匙</th> <th class="auto-style1">会议开始前*分钟还钥匙</th> <th class="auto-style1">时间下限</th> <th class="auto-style1">时间上限</th> <th class="auto-style1">审批人</th> </tr> <asp:Repeater ID="repCategory" runat="server"> <ItemTemplate> <tr> <td class="id" onclick="TabClick();"> <%# Eval("id") %> </td> <td class="caname"> <%# Eval("room_name")%> </td> <td class="minUseNumber"> <%# Eval("min_use_number")%> </td> <td class="beforeTakeKey"> <%# Eval("before_take_key")%> </td> <td class="afterReturnKey"> <%# Eval("after_return_key") %> </td> <td class="upperTime"> <%# Eval("upper_time") %> </td> <td class="lowerTime"> <%# Eval("lower_time") %> </td> <td class="approver"> <%# Eval("approver") %> </td> </tr> </ItemTemplate> </asp:Repeater> </table> <div id="test" style="align-content: center"></div> <p id="demo"></p> </div>
