使用jQuery截取單元格值

Question

我有一個寬度爲100％的表格。它是從我的數據庫動態生成的。我需要截去TH值，如果它們不適合在表中，沒有推動單元格的邊界。如果值被截斷，我想添加一個鏈接...並將全長標籤放入標題標籤。我不需要它來擴大。事情是這樣的：

<th> 
    Long label<a href="javascript:void(0)" title="$myFullValue">...</a> 
</th> 

我不知道如何獲得字符串的值...

$("TH").width(); 
$("TH").val().width(); ?? 

我知道有一些jQuery插件在那裏，但我沒能找到我需要的是什麼，我想我可以試着讓這個項目成爲我自己的旋風。

http://jsfiddle.net/b3cQZ/3/

---

編輯：

只是一個想法掠過我的頭腦。我無法將標籤包裹在標籤中並獲得它的寬度。同時獲得父TH的寬度。如果拉貝的寬度更大，我可以

1. 減法，說20 PX（對...）從TH寬度，
2. 分配一個寬跨的寬度
3. 同時加入溢出：隱藏，和
4. 追加 「...」 的跨度

這會不會工作？

Answer 1

該解決方案採用一個固定的值，但如果你能找到一種方法來計算maxLength，你可以在一個function把這個包，並通過它輸出爲maxLength。

FIDDLEhttp://jsfiddle.net/m72Ja/2/

HTML

<table class="MyTable" border="1" width="400"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Long Long Long Col 3</th> 
      <th>Col 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
     </tr> 
    </tbody> 
</table> 

JS

$(document).ready(function() { 
    $('.MyTable th').each(function() { 
     var maxLength = 10; 
     //if the value is greater than max length,  
     //cut the string to max length then add ...  
     if ($(this).text().length > maxLength) { 
      $(this).text($(this).text().substring(0, maxLength)); 
      $(this).append($("<a href='javascript:void(0);' title='$myFullValue'>...</a>")); 
     } 
    }); 
}); 

Answer 2

問題是，th的寬度將會擴展，直到您完成截斷，並且在知道要使用th的寬度之前，您無法進行截斷。

我建議給th樣式overflow: hidden，以便它不擴大。然後將文本放入<span>（或可能是div）。您可以使用$('th').width()並與文本的寬度div比較。你如何去確定一個合適的位置截斷字符串：

• （如果你使用了等寬字體）現在真的很容易
• （如果您使用可變寬度字體）可能需要反覆斬去字符直到div適合於th。 Yeugh！

Answer 3

有一個jQuery插件來完成您的任務。

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 4

$("TH").width();是指抓住元素n的實際寬度尺寸文本的長度。對於這一點，只需使用傳統的js「length」屬性：$("TH").text().length;總體而言，您要做的事情很好，並不是所有這些都很難獨立完成。我通常會在服務器端設置鏈接和我需要截斷的文本，因爲它已經知道長度和所有內容，但是如果您在客戶端渲染它可以在那裏完成。把你想要隱藏的東西隱藏在一個像「none」這樣的css類的「span」元素中，這樣你所需要的處理程序所做的就是根據需要添加或刪除類。

Answer 5

這是一個嚴格基於單元格中字符數量的簡單示例。如果文本中包含空格的文本行很長，因爲文本很可能會換行，所以不需要。

$("TH").each(function(){//loop over cells 
    var that = $(this);//placeholder for cell 
    if(that.html().length > [some value]){//test length of html 
    var span = $("<span />");//create span 
    span.html(that.html().substring(0, [some value]));//set html of span 
    span.attr("title", that.html());//add title 
    that.empty();//empty cell 
    that.append(span);//add span to cell 
    } 
});