특정 테이블 "td"요소에 대한 정보 얻기

Question

10 X 8 테이블이 있습니다.

모든 행에는 8 개의 열, 즉 8 개의 요소가 있습니다. 행의 각 td에는 다른 클래스가 있습니다. 행의 다른 td 중 하나를 클릭하면 첫 번째 td 요소의 정보를 얻을 수 있습니까?

기본적으로 각 행의 2 열에서 8 열에 jquery onclick 이벤트가 생성됩니다. 이 열 (td) 중 하나를 클릭하면 즉, .. 정보, 즉 ID 또는 클래스 또는 이름 1 열의 속성을 가져와야합니다.이 값을 서버 쪽 코드로 보내야합니다.

- 감사합니다.

Answer 1

예. (당신이 중첩 된 테이블을 경우에 아마 children) 클릭 된 요소에서, 당신은 closest를 통해 행까지 이동 한 다음 당신은 find 또는 children와 관련 클래스와 td을 찾을 수 있습니다

function clickHandler(e) { 
    var cell = $(e.target).closest('tr').children('td.foo'); 
    // ... 
} 

또는 경우를 항상이 원하는 첫td :

var cell = $(e.target).closest('tr').children('td').first(); 

가 어떠한 td에 할당하면 핸들러가 작동합니다 테이블을 tr 또는 실제로 tbody 또는 table 전체로

Live Example | Source

자바 스크립트 :

jQuery(function($) { 

    // Put the handler on the tbody 
    $("#target").click(clickHandler); 

    function clickHandler(e) { 
    var td = $(e.target).closest('tr').children('td').first(); 
    display("The text of the first <code>td</code> in that row is: " + td.text()); 
    } 

    function display(msg) { 
    $("<p>").html(String(msg)).appendTo(document.body); 
    } 

}); 

HTML :

<table> 
    <tbody id="target"> 
    <tr> 
    <td class="one">This is one in row 0</td> 
    <td class="two">This is two in row 0</td> 
    <td class="three">This is three in row 0</td> 
    </tr> 
    <tr> 
    <td class="one">This is one in row 1</td> 
    <td class="two">This is two in row 1</td> 
    <td class="three">This is three in row 1</td> 
    </tr> 
    <tr> 
    <td class="one">This is one in row 2</td> 
    <td class="two">This is two in row 2</td> 
    <td class="three">This is three in row 2</td> 
    </tr> 
    </tbody> 
</table> 

Answer 2

기본적으로 당신 같은 수 : 자세한 정보를 원하시면, 그 작업에 대한

$('td.column2-8').click(function() 
{ 
var firstTdData = $(this).parent().children('td:first').html(); 
}); 

Answer 3

$('td').click(function(){ 
    var $elem = $(this).parent('tr').children('td:first'); 
    var elem_id = $elem.prop('id'); // or $elem.attr('id'); 
    .... // for class, name, etc. 
});