js實現html表格<td>標籤中帶換行的文本顯示出換行效果

來源:互聯網
上載者:User

標籤:har   內容   char   載入   this   還需   table   document   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....好吧這下顯示正常了

 

js實現html表格<td>標籤中帶換行的文本顯示出換行效果

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.