换行符( )没有按预期工作

Line Break ( ) is not working as expected

本文关键字：工作 换行符      更新时间：2023-09-26

我试图分割值(每个项目由管道符号分隔)并在新行中显示每个值。我试图在每个值之间添加'/n'，但是，下面的代码没有按预期工作。

在我的例子中，值是在Location字段。

示例:'位置A|位置B|位置C|位置D'

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

期望:

值应该显示如下所示，

Location A,
Location B,
Location C,
Location D

我想知道为什么位置的值不显示在新行…

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

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

在HTML中有多个空白符号，大多数'#符号被忽略(如't, 'n…)。
HTML中的新行符号为<br/>。

也不是/n，而是'n或'r'n或'r(取决于系统)。

相关文章：