JS implements the line wrap effect in the label of the HTML table.

Meet a problem

I wrote a couple of lines below, but the table didn’t show them as rows. Instead, the newline became a space, and I wanted to convert it myself

ponder a problem

1、You can see that the content of the table is data from the back end, so you want to convert it directly to & lt; BR & gt; tags.

2、If you think about it, do the following, run away and find out, & lt; BR & gt; just show it as text, and it won’t be tagged by html. Snap

3、Continue to think, ready to load the data, process it in js, and turn the line breaks in the text into & lt; BR & gt; tags; but if a content has multiple lines of text, I’ll split it into sections, & lt; BR & gt; plus, but how do these separate words connectTogether, it is bound to continue to tag. What labels do we need to add? Ready to add span and so on.

Wait, I’ll just add a p. Will that be enough? Put the original content of each section in a p. OK, just do it.

Solve the problem

1、First, the web page loads the execution processing function well.

$(document).ready(function(){
    turnGray(); //Complete status data background setting.
    replaceBr(); //Line wrap display in content
});

2、The processing function is as follows

//Content display newline character
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;
                //Because the contents of P tags are empty, the page does not display blank lines, plus a < 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);
    });
}