나는이 같은 HTML 테이블이

Question

자바 스크립트 변수로 전체 테이블의 행 데이터를 가져 오기 :

| name | type | edit | 
| zzz | aaaa | edit | 
| xxx | bbbb | edit | 
| mmm | cccc | edit | 

그래서를, 내가 뭘하려고 "나는 2 행에 대해 편집을 누르면 내가 데이터를 원하는 것입니다 xxx " 및"bbb "는 나중에 사용하기 위해 일부 자바 스크립트 변수에 저장됩니다.

이 스 니펫을 발견했습니다. 그래서를 heres 내 테이블 셀 구조

<tr> 
     <td> <?php echo $row['name'] ?> </td> 
     <td> <?php echo $row['type'] ?></td> 
     <td class="edit_button">Edit</td> 
</tr> 

이는 JS 나는에 사용했다있다 :하지만 그것은 단지 나에게 클릭 셀하지만

$('#tableID').click(function(e){ 
    alert($(e.target).text()); // using jQuery 
}) 

가 UPDATE 전체 행을 줄 것이다 그것은

$("#table_id").on("click", ".edit_button", function() { 
        var data = $(this).closest("td").siblings().map(function() { 
        return $(this).text(); 
       }).toArray(); 
      }); 
      alert(data[0]); 
      alert(data[1]); 
      alert(data[2]); 
} 

Answer 1

$tr=$(e.target).closest("tr"); 

이 의지 테이블 행을 변수에 저장하십시오.

그런 다음이와 TD 셀 각각에 액세스 할 수 있습니다 :

$tr.find('td').each(function(){alert($(this).text())}); 

여기 예제입니다 : http://jsfiddle.net/snowburnt/N85uA/

Answer 2

을 내가 대신 e.target의 이벤트 위임을 사용합니다. 편집 버튼에 클래스 만 지정하면됩니다.

$("tableID").on("click", ".edit_button", function() { 
    var data = $(this).closest("td").siblings().map(function() { 
     return $(this).text(); 
    }).toArray(); 

    console.log(data); 
}); 

지금 data는 edit 버튼 셀의 형제 자매의 배열을 개최한다.

---

배열이 필요하지 않지만 루프에서 직접 텍스트로 작업하려면이 작업을 대신 수행하십시오.

$("tableID").on("click", ".edit_button", function() { 
    $(this).closest("td").siblings().text(function(i, txt) { 
     console.log(txt); // do something with the text 
    }); 
});