浮动到表格中某一行,根据改行信息高亮某区域文字,并设置对应滚动高度,使高亮文字出现在当前视野

事先说明,此代码结合应用项目场景,故这里的代码很难理解,纯本人笔记

            highlightOpinion: function (opinion) {
                $scope.mark.highlightContent = $scope.mark.highlightContentStore;//highlightContentStore是后台接受不带高亮效果的文字

                var reg = new RegExp();
                var replaceStr = ‘‘;
                for (var k in opinion) {
                    if (k == ‘评论关键字‘) {
                        if (opinion[k] !== ‘ ‘ && opinion[k] !== ‘/‘) {
                            reg = new RegExp(opinion[k], ‘ig‘);
                            replaceStr = `<span class="color-bg-green">${opinion[k]}</span>`;
                            $scope.mark.highlightContent = $scope.mark.highlightContent.replace(reg, replaceStr);
                        }
                    } else if (k == ‘评论小类‘) {
                        if (opinion[k] !== ‘ ‘ && opinion[k] !== ‘/‘) {
                            reg = new RegExp(opinion[k], ‘ig‘);
                            replaceStr = `<span class="color-bg-blue">${opinion[k]}</span>`;
                            $scope.mark.highlightContent = $scope.mark.highlightContent.replace(reg, replaceStr);
                        }
                    }
                }

                //滚动条移动到该词语
                var ele = document.getElementById(‘textarea2‘);
                var scrollHeight = ele.scrollHeight,
                    totalStrLength = ele.value.length,
                    currentStr = ele.value.toLowerCase().indexOf(opinion[‘评论关键字‘].toLowerCase()) == -1 ?
                     ele.value.toLowerCase().indexOf(opinion[‘评论小类‘].toLowerCase()) :
                     ele.value.toLowerCase().indexOf(opinion[‘评论关键字‘].toLowerCase());
                $timeout(function () {
                    if (currentStr == -1) return; //说明原文中不包含评论关键字和评论小类
                    var eleCopy = document.getElementById(‘textarea2-copy‘);
                    eleCopy.scrollTop = (scrollHeight * currentStr / totalStrLength - 20 > 0) ? (scrollHeight * currentStr / totalStrLength - 20) : (currentStr / totalStrLength);
                }, 0);
                $scope.mark.showHighlight = true;
            },

效果:

时间: 2024-10-16 20:16:45

浮动到表格中某一行,根据改行信息高亮某区域文字,并设置对应滚动高度,使高亮文字出现在当前视野的相关文章

dojo中获取表格中某一行的某个值

dojo中经常出现对表格中的某行进行操作,如单击某行修改.删除等.那怎样获取某行的唯一标示呢? 如查询表格中的某列有个userId,并且这个是唯一的,那么可以通过它来访问这一列 具体操作代码如下: var grid = dijit.byId("gridId"); function btnClick(e) { userId = grid._by_idx[e.rowIndex].item.userId; } dojo.connect(grid,"onRowClick",

web开发学习笔记(4):js获取table的行数和表格中某一行某一列的内容

table的id="tab" 一.获取table的行数 var count=document.getElementById("tab").rows.length; 二.获取第i行第j列的内容(方式不止三种,根据实际情况选择,比较推荐方式一) 方式一: <pre name="code" class="html"><strong>var title=tab.rows[i].cells[j].children

dtgrid 手动条件删除表格中的某一行

dtgrid 手动条件删除表格中的某一行 var grid = $.fn.DtGrid.init(dtGridOption); $(function () { grid.load(); }); function DeleteGood(id,goodName){ layer.confirm('确定删除商品['+goodName+']', { btn: ['确定','取消'], //按钮 shade: false //不显示遮罩 }, function(){ for (var i = 0; i <

jQuery获取动态表格中checkbox被选中一行的属性数据

http://www.jianshu.com/p/0ec66caf4c40 jQuery获取表格中checkbox被选中一行的属性数据

mysql5.7基础 更新表格中某列为指定数据的 一行

镇场文:       学儒家经世致用,行佛家普度众生,修道家全生保真,悟易理象数通变.以科技光耀善法,成就一良心博客.______________________________________________________________________________________________________ Operating System:UbuntuKylin 16.04 LTS 64bitmysql: Ver 14.14 Distrib 5.7.17, for Linux (

js实现在表格中删除和添加一行

<!DOCTYPE html><html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> window.onload = function(

js获取表格中的数据 以及 表格中checkbox选中一行数据

前言 不知道是不是大家也遇到过类似的表单,但我绝对是第一次见,如下图所示,表单中包含了表格. 上图中的表格数据是根据数据库中学生表而变化的,这增加了获取表中数据的复杂程度,这里仅仅是记录js如何获取数据传值到后端的办法,所以,仅以表格中张三.李四为例. 示例代码 html <div class="modal-body"> <form id="exam-score-add-form" class="smart-form">

jQuery 表格中实现&ldquo;删除线&rdquo;的增进方法

之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线. 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果. 这里有两个方法,是在不同时期写的,第一个有些缺陷,第二个在第一个基础上要好很多,目前没有发现什么缺陷吧. 直接上代码吧 页面内容: <body> <table style="border:1px solid black;padding-left:5px;padding-right:5px;" cellp

CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="float-element"></div> <div class="float-element"></div> <div class="float-elem