2014-04-11 1 views
0

나는 테이블 행 생성이 코드가 있습니다jQuery를 또는 자바 스크립트 방법은 텍스트의 너비/높이를 얻을 수

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'를 보내고 거기에있는 각 th를 반복합니다.

.r90은 텍스트를 90도 회전시켜 수직으로 표시하는 클래스입니다.

테이블이 HTML 파일로 정적으로 만들어 졌을 때이 함수가 작동 했었지만 동적으로 테이블을 생성 했으므로 작동하지 않습니다.

내가 결국 필요한 것은 그 행의 높이를 적절하게 설정할 수 있도록 최대 스팬이 얼마나 많은 px를 차지하는지를 아는 것입니다.

+0

'$ (this) .outerWidth()'및/또는'$ (this) .outerHeight()'를 사용하는 것을 고려해보십시오. – Stphane

+0

너비를 픽셀 단위로 가져 오는 방법이 있나요? 스팬 (var sp)을 생성 한 직후 텍스트? –

+0

'th span {display : inline-block}'css를 추가 할 수 있습니다. thss 내부의 범위는 인라인 상자로 반응하며 너비는 "gettable"일 수 있습니다. 테이블이 DOM에 추가되면이 너비를 얻을 수있을 것입니다. – Stphane

답변

0

감사합니다. 내가 원하는대로 정확히 작동

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); 
    } 

... '는 JF'내가 이것으로 끝났다에서 링크를 기준으로합니다. :)