js实现，搜索数据，背景高亮显示

最新推荐文章于 2024-08-21 18:03:01 发布

克雷莫纳的月光

最新推荐文章于 2024-08-21 18:03:01 发布

阅读量664

点赞数

分类专栏：前端文章标签： JavaScript HTML jQuery

本文链接：https://blog.csdn.net/denghaolinzy/article/details/89025551

版权

这篇博客介绍如何使用JavaScript和jQuery实现搜索数据时的关键字高亮显示。通过遍历表格中的每一行，对匹配到的搜索关键字进行替换，用带有'highlight'样式的<span>标签包裹，以突出显示搜索结果。

摘要由CSDN通过智能技术生成

{if condition="$Think.get.kw"}
<!--关键字查询，背景字突出-->
<script>
    $(function () {
        //所有匹配的元素都替换的正则，如需要所有匹配元素都高亮。将replace(regexp/substr,replacement);第一个参数使用regexp。
        //re = new RegExp("{$Think.get.kw}","g"); //regexp name|tel|address|logistics|order
        var trArr = $('.table > tbody').children('tr');
        console.log(trArr.length)
        for (var i = 0; i < trArr.length; i++) {
            //编号
            var address = trArr.eq(i).find('td').eq(0).html();
            var high_address = address.replace("{$Think.get.kw}", "<span class='highlight'>{$Think.get.kw}</span>");
            trArr.eq(i).find('td').eq(0).html(high_address);
            //物流公司
            var name = trArr.eq(i).find('td').eq(1).html();
            var high_name= name.replace("{$Think.get.kw}", "<span cla