使用jQuery截断单元格值

时间:2011-05-16 16:46:58

标签: jquery

我有一张100%宽度的桌子。它是使用我的db中的值动态生成的。如果它们不适合表格,我需要截断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的宽度。如果labe的宽度更大,我可以

  1. 从TH宽度减去20 px(for ...),
  2. 将宽度指定为跨度宽度
  3. 添加溢出:隐藏
  4. 将“...”附加到范围
  5. 这不会起作用吗?

5 个答案:

答案 0 :(得分:1)

此解决方案使用固定值,但如果您能够找到计算maxLength的方法,则可以将其包含在function中,并将输出作为maxLength传递给它

FIDDLE http://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>"));
        }
    });
});

答案 1 :(得分:1)

$("TH").width();用于获取元素的实际宽度尺寸而不是文本的长度。为此,只需使用传统的js“length”属性:$("TH").text().length;总的来说,你要做的就是好,而不是你自己很难做到的。我通常有服务器端设置链接和我需要截断的文本,因为它已经知道长度和一切,但如果你在客户端渲染它很好在那里做。在你的“span”元素中包含你想要隐藏的内容,其中包含类似“none”.none{display:none;}的css类,这样你需要让处理程序做的就是根据需要添加或删除类。

答案 2 :(得分:1)

这是一个简单的例子,严格基于单元格中的字符数。如果有长行的文本带空格,则没有必要,因为文本很可能会换行。

$("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
  }
});

答案 3 :(得分:0)

问题是th的宽度将被扩展,直到你进行截断,并且在知道希望th的宽度之前不能进行截断。

我建议给th样式overflow: hidden以便它不会展开。然后将文本放在<span>(或可能是div)。

然后,您可以使用$('th').width()并与文字div的宽度进行比较。如何确定截断字符串的合适位置:

  • (如果你使用等宽字体)现在非常容易
  • (如果使用可变宽度字体)可能需要迭代切断字符,直到div适合th。 Yeugh!

答案 4 :(得分:0)