dynamic display of <textarea> displays great long string of data

dynamic display of <textarea> displays great long string of data

Trying to display stored data into a dynamically created table. In the <body>, <textarea> was defined with rows='3' and cols='40'.

This, naturally, results in 3 rows of data showing 40 characters per row. Displays nicely in the 'form'.

Now, assuming the data occupies the full 3 rows of 40 cols each, the display is one long string which makes the table spread out all over the page. Apparently the line feeds are stripped from the data.

How can I maintain the 3-row. 40-col format in the dynamic display?

  1.  <td colspan="2"><textarea rows="3" cols="40"></textarea></td></tr> // in <body>


  1. function storeData(pData) {   // returned from AJAX
         
             
        recId = pData["id"]; // used later on
        last=pData["Last"];
         
        table_str = "<table class='center' id='verifyTbl'  border='4' cellspacing='2' cellpadding='4' bgcolor='#fff99d' ><br/>"; 
       
        $.each(pData, function(key, value) {
         
        if(key=='id') return; // don't care about seeing 'id'
        
            table_str += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
     
        });
     
        table_str += "</table><p></p><p></p>";

    $('#div1').hide();
     
    $("#div2").show();
     
    $("#div2").append("<p id='msgbox'></p>");
       
     successMsgShow();
         
        $("#div2").append(table_str + "<p></p>");
     
    }