2011-01-18 7 views
7

다음 HTML 구조를 가지고 있으며 즉각적인 길이는 <td>s입니다.카운트 찾기 <td> Jquery

<table class="PrintTable"> 
    <tr> 
     **<td>** 
     <table> 
      <thead> 
       <tr><th>Type Of Transaction</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Name</td> 
       </tr> 
       <tr> 
        <td>Age</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
     **<td>** 
     <table> 
      <thead> 
       <tr><th>2006</th></tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Andi</td> 
       </tr> 
       <tr> 
        <td>25</td> 
       </tr> 
      </tbody> 
     </table> 
     </td> 

    </tr> 
</table> 

내가 TD의 길이를 알아 내기 위하여 사용하고있는 기능은

function getBody(element) 
{ 
    var divider=2; 
    var originalTable=element.clone(); 
    var tds = $(originalTable).children('tr').children('td').length; 
    alert(tds); 


} 

내가보고하고 그 결과입니다 아무 단서는 모두 0입니다 - 여기 내가 사용하고있는 코드는 없다 . 나는 2. 어떤 도움을 주시면 감사하겠습니다.

+0

왜'.clone() '을 사용하고 있습니까? 그리고'element'는 jQuery 객체를 의미합니까? 나는'clone'이 DOM 객체의 네이티브 JS 메소드가 아니기 때문에 그렇게 가정한다. 'getBody'를 호출하는 방법의 예제를 제공해 주시겠습니까? –

+0

예, 요소는 JQuery 객체이며 완전한 테이블을 객체로 포함합니다. clone()을 호출하지 않더라도 여전히 2를 기대하는 것처럼 0을 표시합니다. – Nrusingha

답변

19

getBody을 호출하는 방법에 대해 별표를 제거하고 몇 가지 가정 사항을 작성 했으므로 올바르지 않은 사항이 있으면 알려주십시오.

코드 : http://jsfiddle.net/27ygP/

function getBody(element) { 
    var divider = 2; 
    var originalTable = element.clone(); 
    var tds = $(originalTable).children('tbody').children('tr').children('td').length; 
    alert(tds); 
} 

getBody($('table.PrintTable')); 

큰 변화는이 .children('tbody')를 추가했다. HTML 인터프리터는 에 tr을 포함합니다. 그것을 따라 가면 괜찮을거야.

+0

고마워. 그것은 작동합니다. 이 모든 트릭을 찾을 수있는 좋은 디버거가 있습니까? – Nrusingha

+2

Firefox 용 [Firebug] (http://getfirebug.com/)는 시장에서 DOM을 탐색하는 데 가장 좋은 도구입니다. 주요 브라우저에는 모두 동일한 기능을하는 내장 도구가 있습니다 (메뉴를 클릭하기 만하면됩니다). 다른 것들 중에서도 수동으로 트래버스 할 수있는 대화 형 트리가 있습니다. –

+0

감사! .children()으로 여러 셀렉터를 사용할 수없는 이유가 궁금합니다. –

2

다음과 같이 사용하고 싶습니다.

$("td").length 

UPDATE

당신은 시작 선택기로 TR 태그를 사용 후 바로 첫 번째을 먼저 사용하여 각 TD 선택기를 계산하는 것이 좋습니다.

$("tr", $("td:first")).length 
+0

예, 중첩 된 것은 아니지만 ** **에만 해당됩니다. – Nrusingha

1

이 작동합니다 :

var itemsCount = $(".PrintTable > tr > td").length; 

업데이트 : 난 그냥 존재하지 않는 경우에, 적어도 크롬 그래서 크로스 브라우저 지원을 얻기 위해, <tbody>를 삽입 것을 깨달았다

:

var itemsCount = $(".PrintTable > tbody > tr > td, .PrintTable > tr > td").length; 

예 : http://jsfiddle.net/H2JWS/

+0

아니요 결과가 0으로 표시됩니다. – Nrusingha

3

이 시도 :

//For FFox 
$(document).ready(function(){ 
var countTD=$("Your_Table_ID_or_Class tr:first > td").length; 
}); 

// For webKit Browser 
$(window).load(function(){ 
var countTD=$("Your_Table_ID_or_Class tr:first > td").length; 
}); 

참고; 동적 테이블 행 열을 만드는 경우 특정 행에 td 년대의 수를 계산하려면 다음이 작업을 수행 할 수 일반적으로 $(document).live("click",function(){});

1

을 사용 ..

$(function(){ 
    count = $("table tr").children("td").index()+1; 
}); 
1

VAR를 rowCount = $ ('# myTable tr'). 길이;

0
var originalTable = $(remove_copy_drargelement).closest('table').clone(); 

var tds = $(originalTable).children('tbody').children('tr').children('td').length;