前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js实现html表格<td>标签中带换行的文本显示出换行效果

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

作者头像
未来sky
发布2018-09-29 11:37:54
17.1K0
发布2018-09-29 11:37:54
举报
文章被收录于专栏:好好学习吧

遇见问题

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

思考问题

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

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

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

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

解决问题

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

代码语言:javascript
复制
$(document).ready(function(){
    turnGray(); //完成状态数据背景置灰
    replaceBr(); //内容中换行符显示
});

2、处理函数如下

代码语言:javascript
复制
//内容显示换行符
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....好吧这下显示正常了

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 遇见问题
  • 思考问题
  • 解决问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档