换行符（\ n）未按预期工作

Question

我正在尝试拆分值（每个项目由管道符号分隔）并在新行中显示每个值。我试图添加＆＃39; / n＆＃39;在每个值之间但是，以下代码没有按预期工作。

在我的情况下，值位于“位置”字段中。

示例：＆＃39;位置A |位置B |位置C |位置D＆＃39;

＆＃13;

＆＃13;

//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(',\n ') + "</td>" +
                "<td class='col-md-2'>" + row.Status + "</td>" +              
              "</tr>"; 
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

期望：

值应显示如下，

Location A,
Location B,
Location C,
Location D

我想知道为什么位置中的值没有显示在新行中...任何建议都表示赞赏。

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>

Answer 2

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>"; 
  }

Answer 3

在HTML中有多个空格符号，大多数\#符号都会被忽略（例如\t，\n ...）。
HTML中的新行符号为<br/>。

此外，它不是/n，而是\n或\r\n或\r（取决于系统）。