js实现html表格<td>标签中带换行的文本显示出换行效果

遇见问题

如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下

思考问题

1、可以看到表格的内容是后端传来的数据,于是想直接在后端转换下,把换行符替换成<br>标签

2、想到就做,如下,写好后一跑,发现,<br>只是显示成了文本,并不会被html识别成标签。。。啪啪啪打脸

3、继续想,准备在数据加载后,在js里面处理下,把文本内容中的换行符转为<br>标签;但是如果一个内容有多行文字,我就要把它拆分为多个小节,<br>好加,但是这些分开的文字怎么连在一起呢,势必还需要继续加标签,那么加什么标签呢?准备加span等等。。

等下,我直接加个p不就行了吗?把原先每一小节的内容放到一个p里。好,就这么干把。。

解决问题

1、首先,网页加载好执行处理函数

$(document).ready(function(){
    turnGray(); //完成状态数据背景置灰
    replaceBr(); //内容中换行符显示
});

2、处理函数如下

//内容显示换行符
function replaceBr(){
    var content = $('.data_table tr td:nth-child(3)');
    content.each(function(){
        var txt = $(this).text();
        var j =0;
        var span = document.createElement("span");
        for(i=0;i<txt.length;i++){
            if(txt.charAt(i)=='\n'){
                var p = document.createElement("p");
                var partTxt = txt.slice(j,i);
                p.innerHTML = partTxt;
                //由于p标签内容为空时,页面不显示空行,加一个<br>
                if(partTxt==''){
                    p.appendChild(document.createElement("br"));
                }
                span.appendChild(p);
                j = i + 1;
            }
        }
        var p_end = document.createElement("p");
        p_end.innerHTML = txt.slice(j);
        $(this).text('');
        span.appendChild(p_end);
        $(this).append(span);
    });
}

3、期间又遇到一个问题,按想象中写好之后执行效果如下:

4、WTF!!我的第四行跑哪去了?F12看了下,第四行的p也是有的啊,好吧,p内容是空它不显示。。。

5、可以看到第2点的代码中标粉色的地方,我给空p加了个br,还是没能绕过br....好吧这下显示正常了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的Python

python分布式爬虫搜索引擎实战-5-右键即可的爬虫利器xpath爬取伯乐在线实例

提取目标伯乐在线 xpath让你可以不懂前端html,不看html的详细结构,只需要会右键查看就能获取网页上任何内容。速度远超beautifulsoup。 x...

3996
来自专栏非典型技术宅

iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

1642
来自专栏进击的君君的前端之路

CSS常见样式(二)

1812
来自专栏Web项目聚集地

50道CSS面试题(附答案)

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+bo...

1483
来自专栏小巫技术博客

A013-animator资源

783
来自专栏极客慕白的成长之路

50道CSS基础面试题

1625
来自专栏前端知识分享

第162天:canvas中Konva库的使用方法

3281
来自专栏我就是马云飞

View的绘制流程之MeasureSpec

目的 我在一个多月之前就说我准备开始梳理基础的事,好吧,我承认这一个月没我怎么梳理。或者梳理的不多,当我梳理到view的时候,发现需要分成绘制流程以及事件分发进...

2009
来自专栏偏前端工程师的驿站

CSS魔法堂:更丰富的前端动效by CSS Animation

 在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transti...

2034
来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

3782

扫码关注云+社区

领取腾讯云代金券