JavaScript使table中的特定内容加粗变红

最新推荐文章于 2023-11-23 22:40:08 发布

mountisome

最新推荐文章于 2023-11-23 22:40:08 发布

阅读量2.7k

点赞数 1

分类专栏：前端文章标签：前端开发 JavaScript table 高亮查询

本文链接：https://blog.csdn.net/weixin_45730969/article/details/124371718

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在做一个检索系统时，我想让后端传入的关键字在table中高亮，所以使用js将查询的关键字变成红色并且加粗。

js代码如下：

// 查询的关键字变成红色并且加粗
let title = [[${title}]].toString();
let table = document.getElementById("table");
let row = table.rows.length; // 获得table的行数
for (let i = 1; i < row; i++) {
    let ptitle = table.rows[i].cells[2];
    let ptitles = ptitle.innerHTML;
    let values = ptitles.split(title);
    ptitle.innerHTML = values.join('<span style="color: red; font-weight: bold">' + title + '</span>');
}