专栏首页好好学习吧js实现html表格<td>标签中带换行的文本显示出换行效果

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 条评论
登录 后参与评论

相关文章

  • 初识Go语言--(1)环境安装

    未来sky
  • 使用vba做一个正则表达式提取文本工具

         测试中经常会遇到对数据的处理,比如我要删除某些特定数据,数据源是从网页请求中抓取,这时候可能复制下来一大堆内容,其中我们只需要特定的某些部分,笔者通常...

    未来sky
  • testng中使用reportng报告

    未来sky
  • 中心化交易所弊端尽显,DEX时代即将到来?用户分析告诉你

    去中心化交易所留在以太坊链上的数据已是书面史,工件、日志条目、交易和合同消息在这里都可以保留。

    区块链大本营
  • 介绍一个非常好用的文件服务器 - HFS

    HFS引入了一个所谓虚拟文件系统的概念:可以在虚拟文件系统里随心所欲的创建文件夹,然后把本地物理文件系统的文件按照自己需要的层级结构加入到虚拟文件系统里:

    Jerry Wang
  • 提升Kaggle模型的实用小技巧!

    如果你最近刚入手Kaggle,或者你是这个平台的老常客,你可能会想知道如何轻松提升模型的性能。以下是我在Kaggle历程中积累的一些实用技巧(https://w...

    Datawhale
  • 自然框架的源代码、Demo、数据库、配置信息管理程序下载(2011.1.7更新)

    自然框架在线演示:http://demo.naturefw.com/ 目前在线演示不开放管理员账号。 自然框架的网站已经基本完成,下载就转到网站里面了,htt...

    用户1174620
  • 代码写了那么多,你搞明白yield是个啥没?

    本文作者:IMWeb 否子戈 原文出处:IMWeb社区 未经同意,禁止转载 ES6真是颠覆JavaScript的东西,随便翻一个新特性出来,就让自以为...

    IMWeb前端团队
  • 代码写了那么多,你搞明白yield是个啥没?

    ES6真是颠覆JavaScript的东西,随便翻一个新特性出来,就让自以为是的老古董们傻眼跳楼。在之前接触ember.js的时候,接触到了yield,嫩是半天没...

    IMWeb前端团队
  • 如何编写和优化WordPress网站的Robots.txt

    要知道WordPress robots.txt文件中的“Disallow”命令与页面头部的元描述noindex 的作用不完全相同。您的robots.txt会阻止...

    开心分享

扫码关注云+社区

领取腾讯云代金券