HTML 设置通过模糊查询可以使表格某行数据显示高亮

Posted 2022-12-23

背景

最近在做项目的过程中，一个功能需要把表格的某一行数据显示高亮，通过学习和查阅资料查到一些方法。

正文

想要让某一行数据高亮，需要准备的数据：搜索框、搜索按钮，以及展示的表格。

<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>