JS implementation HTML Table <td> tag text with line wrapping shows the line break effect

Meet the problem

I wrote a few lines as follows, but the table is not displayed by the line, the line break becomes a space, so I want to convert the next

Thinking questions

1, can see the contents of the table is the back end of the data, so you want to directly in the back-end conversion, the line break to replace the <br> tag

2, think about doing, such as the next, write well after a run, found that,<br> just display into the text, and will not be HTML recognized as a label ... A slap in the face

3, continue to think, ready after the data load, in the JS inside processing, the text content of the newline character into the <br> tag; but if there is more than one line of text, I'm going to split it into multiple bars,<br> good Plus, but how are these separate words linked together? It is bound to continue to add tags, then add what label? Ready to add span, etc...

Wait, can I just add a P? Put the contents of each of the previous bars into a p. All right, just do it.

Solve the problem

1, first, the Web page load good execution processing function

$ (document). Ready (function() {    // finish status data background gray    // content in line break display });

2, the processing function is as follows

//content display line breaksfunctionReplacebr () {varContent = $ ('. Data_table tr td:nth-child (3) '); Content.each (function(){        varTXT = $ ( This). text (); varJ =0; varspan = document.createelement ("span");  for(i=0;i<txt.length;i++){            if(Txt.charat (i) = = ' \ n '){                varp = document.createelement ("P"); varParttxt =Txt.slice (j,i); P.innerhtml=Parttxt; //The page does not display a blank line because the P tag content is empty, plus a <br>if (parttxt== ') {P.appendchild (document.createelement ("BR")));                } Span.appendchild (p); J= i + 1; }        }        varP_end = document.createelement ("P"); P_end.innerhtml=Txt.slice (j); $( This). Text (' ');        Span.appendchild (P_end); $( This). append (span); });}

3, the period also encountered a problem, according to the imagination to write the following results:

4, wtf!! Where's my fourth line? F12 looked down, the fourth line of P is also some Ah, OK, p content is empty it does not show ...

5, you can see the 2nd code in the Pink place, I added a br to empty p, or not to bypass BR .... Okay, here's the normal display.

JS implementation HTML Table <td> tag text with line wrapping shows the line break effect