顯示行表內容

打破我有一個這樣的HTML：顯示行表內容

<table id="mytable"> 
<tr> 
<td>  

Name: 
Rica 

Lastname: 
Florentino 

Amount: 
3,000 
</td> 
</tr> 
</table>

我如何能夠顯示它是什麼？輸出似乎換行符轉換爲空格..我得到的輸出是：

Name: Rica Lastname: Florentino Amount: 3,000

它應該是：

Name: 
Rica 

Lastname: 
Florentino 

Amount: 
3,000

來源

2013-10-21 Onimax

只需添加一些''
標籤！ [小提琴]（http://jsfiddle.net/ksdJb/） –

這是真正的'表格'標記（只有一個單元格）？它是否修復？將表格封裝在一個沒有標記的表格單元格中並且以這種格式顯示它似乎很奇怪。但是，如果這真的是這種情況，那麼在CSS中使用'white-space：pre'。 –

好了，你可以添加<br>

之間

<table id="mytable"> 
<tr> 
<td>  
    Name: 
    Rica 
    <br> 
    Lastname: 
    Florentino 
    <br> 
    Amount: 
    3,000 
</td> 
</tr> 
</table>

或使用css管理

已更新

$(function(){ 
    $('#mytable td').css({'white-space': 'pre-line'}); 
});

fiddle

來源

2013-10-21 07:13:09 bipen

爲了輸出OP想要的內容，你仍然缺少一些。此外爲什麼在標籤中不必要的'/'？ –

@ rink.attendant.6以及''
是怎麼一回事，因爲一些生成HTML系統可以基於XML的發電機，因此沒有能力只輸出裸
標籤。 ''
工作在這樣的情況下..但因爲我認爲這這裏OP是不是這樣的..刪除多餘的'/' – bipen

輸出已經顯示，所以我怎麼能自動轉換的空間或至少保持預格式化數據？其標題也被修改.. – Onimax

你聽說換行的？

<br />

將創建html換行符。插入此你希望做一個斷行的任何時間;）

，如果一切都失敗了，你可以使用預格式化文本：

<pre> 
    Your text: 
    Lorem Ipsum 
</pre>

這只是轉儲格式的文本是在代碼的方式瀏覽器。儘管在默認的瀏覽器樣式表中，大多數情況下仍然有不同的字體與其相關聯。

也給了你有一些CSS的情況下，您可以按如下清除瀏覽器的樣式表：

*{ 
/* selects all elements */ 
/* insert your default stuff here */ 
}

改變元素的HTML內容使用.html()
稱此行一次在頁面加載，它應在起始處插入pre標籤都有效，你的表格單元格

$('#mytable tr td').html("<pre>" + $('#mytable tr td').html() + "</pre>")

年底可能難以維持格式化無論哪種方式，因爲有時你的G在被髮送到客戶端之前，被優化的html會被優化。這意味着您可能會丟失代碼中的格式。

相反，您應該嘗試更改html代服務器端並在那裏使用換行符標記。

來源

2013-10-21 07:14:28 Vogel612

我需要使用jquery在該數據上添加預標記。或至少將空間轉換爲
，因爲輸出已顯示 – Onimax

認沽BR標籤

<table id="mytable"> 
    <tr> 
    <td>  

     Name: 
    <br> 
    Rica 
    <br> 
    Lastname: 
    <br> 
     Florentino 
     <br> 

     Amount: 
     <br> 
     3,000 
    </td> 
    </tr> 
    </table>

這裏是fiddle

來源

2013-10-21 07:15:26 DevelopmentIsMyPassion

作爲替代手動插入<br>元素，你可以使用CSS來做到這一點：

<table id="mytable"> 
<tr> 
<td style="white-space: pre-line;">  
    Name: 
    Rica 

    Lastname: 
    Florentino 

    Amount: 
    3,000 
</td> 
</tr> 
</table>

見jsFiddle。此外，你可能想了解更多關於white-space屬性。

如果你有一個以上的電池，我建議使用樣式表，而不是style元素。

來源

2013-10-21 07:16:17

顯示行表內容

回答

相關問題