javascript - 换行符 (\n) 未按预期工作

Question

<分区>

Answer 1

使用 <br />而不是 \n

//this data comes from server via ajax response

var rows = [];

var row1 = {};
row1.Name = 'Test User A';
row1.Location = 'Location A|Location B|Location C|Location D';
row1.Status = 'Success';

rows.push(row1);


//this code runs after receving the ajax call

$.each(rows, function(i, row){
  
  $('#StatusDataBody').append(GetRowTemplate(row));
  
  });


function GetRowTemplate(row){
  
  return "<tr>" +
                "<td class='text-center col-md-2'>" + row.Name + "</td>" +
                "<td class='col-md-3'>" + row.Location.split('|').join('<br />') + "</td>" +
                "<td class='col-md-2'>" + row.Status + "</td>" +              
              "</tr>"; 
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <table class="table table-condensed table-custom">
                    <caption class="title-color">
                        <strong>Status Report</strong> | 
                <button type="button" id="DownloadStatusReportBtn" class="btn btn-success btn-xs disabled" title="Click here to download details"><span class="glyphicon glyphicon-download-alt"></span>&nbspDownload Detail</button>
                    </caption>
                    <thead>
                        <tr>                            
                            <th class="text-center col-md-2">Name</th>
                            <th class="text-center col-md-3">Location</th>
                            <th class="text-center col-md-2">Status</th>          
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="7">
                                <div id="StatusDataContainer">
                                    <table class="table table-bordered table-condensed">
                                        <tbody id="StatusDataBody"></tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>