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

最新推荐文章于 2022-11-16 15:46:50 发布

转载最新推荐文章于 2022-11-16 15:46:50 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kusy/p/9568535.html

文章标签：

#后端

博客讲述了处理表格数据换行符显示问题的过程。最初想在后端将换行符替换为 标签，未成功。后打算在js里处理，考虑拆分文字加标签，最终决定用p标签。执行中又遇空p不显示问题，给空p加br后显示正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇见问题

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

思考问题

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

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

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