jQuery或Javascript方法获取文本的宽度/高度

时间:2014-04-11 14:49:31

标签: jquery html-table width

我有这个生成表格行的代码:

var tr = $('<tr></tr>').attr('id', 'PO');   
    tbody.append(tr);
    for( var i=0; i < $numCols; ++i)
        {
        var th = $('<th></th>').addClass('r90').attr('id', 'th1' + i);
        var sp = $('<span></span>').text($headers1[i]); 

        if(i == 6)
            {
            th.addClass('biggerText borderCell2 selectable');
            }
        if(i > 6 && i < 13 )
            {
            th.addClass('borderCell2 smallerText selectable isHeader');
            }
        if(i > 12)
            {
            th.addClass('borderCell1 smallerText selectable');
            }
        th.append(sp);
        tr.append(th);
        }

此功能获得最大宽度

function getLargest(id)
    {
    $largestWidth = 0;
    $('#' + id + ' th').each( function() {
        if( $(this).width() > $largestWidth)
            {
             $largestWidth = $(this).width();
            }
    }); 
    alert($largestWidth);
    //$('#' + id).css('height', $largestWidth);
    }

目前我发送的ID是'PO',并在那里迭代。

.r90是一个将文本旋转90度以使其显示为垂直的类。

我曾经在html文件中静态创建表时使用此函数,但现在我正在动态生成表,我无法使其工作。

我最终需要知道最大跨度占用多少px,以便我可以适当地设置该行的高度。

1 个答案:

答案 0 :(得分:0)

谢谢你们。 根据&#39; Jf的链接&#39;我最终得到了......

function getWidth(id) 
    {
    $largestWidth = 0;
    $('#' + id + ' th span').each( function() {
        var text = $(this).text();
        var o = $('<div>' + text + '</div>').css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': '16px verdana'}).appendTo($('body')),
        w = o.width();
        if(w > $largestWidth)
            {
            $largestWidth = w;
            }
        o.remove();
    });

    $('#' + id).css('height', $largestWidth);
    }

它完全按照我的需要工作。 :)