layui表格中关键字加粗加红显示

使layui表格中根据关键词进行加红加粗显示，先看效果

前台代码

<script tab="table处理及事件">
    var table = layui.table;
    layui.use(['table'], function () {
        table.render({
            id: 'ID-table-news',
            elem: '#ID-table-news',
            url: '/newslist_xj',
            method: 'post',
            cols: [[
                { field: 'id', fixed: 'left', maxWidth: 50, title: 'ID', sort: false },
                {
                    field: 'title', title: '标题', sort: false, templet: function (d) {
                        var keyword = $('#input_id_keyword').val().trim();
                        if (keyword == "")
                            return d.title;
                        var keyword_red = '<b style="color:red;" >' + keyword + '</b>';
                        return d.title.replace(keyword, keyword_red);
                    }
                },
                { field: 'source', title: '来源', sort: false },
                { field: 'date', minWidth: 160,title: '日期', sort: true },
                { field: 'category1', title: '分类1', sort: false },
                { field: 'category2', title: '分类2', sort: false },
                { field: 'content', title: '内容', sort: false },
                { fixed: 'right', title: '操作', maxWidth: 80, toolbar: '#ID-table-news-delete' }
            ]],
            page: true
        });
    });
</script>

代码解析

这里使用到了自定义模板的模板 - 函数写法在title列中添加templet函数里先获取当前查询的关键词，如果为空，则直接返回标题，不为空，则把标题中的关键词替换为组建好的html标签返回就可以了。这里也可以用mark高亮显示。