js實現html表格標簽中帶換行的文本顯示出換行效果

遇見問題

如下內容中我寫了幾行，但是表格中並未按行顯示，換行符反而變成了空格，於是想自己轉換下

思考問題

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....好吧這下顯示正常了