我有一张100%宽度的桌子。它是使用我的db中的值动态生成的。如果它们不适合表格,我需要截断TH
值,而不是推动单元格的边界。如果值被截断,我想添加一个带有 ... 的链接,并将全长标签放入标题标签中。我不需要它来扩展。像这样:
<th>
Long label<a href="javascript:void(0)" title="$myFullValue">...</a>
</th>
我不确定如何获取字符串的值......
$("TH").width();
$("TH").val().width(); ??
我知道有一些jQuery插件,但我无法找到我需要的东西,我想我可以试着给这个项目我自己的旋转。
编辑:
只是一个让我想到的想法。我无法将标签包装在标签中并获得它的宽度。同时获得父TH的宽度。如果labe的宽度更大,我可以
这不会起作用吗?
答案 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)