JQuery HTML 테이블의 각 행에 대해 PHP 고유 ID가 있습니다

Question

방금 ​​JQuery를 배우는 중이므로 다음에 중점을 둡니다.

나는 (MySQL 데이터베이스 쿼리 결과를 PHP로 생성 한) HTML 테이블을 가지고있다.

테이블의 첫 번째 열에는 사용자가 셀 값을 변경하고 데이터베이스를 업데이트 할 수있는 드롭 다운 메뉴가 있습니다. 나는 사용하고있다. .toggle,. post to . 그 일을해라. 내 문제는 복제 된 ID를 대상으로하기 때문에 첫 번째 행만 작동한다는 것입니다.

그렇다면 누군가 나를 올바른 기술로 안내 할 수 있습니까? 가장 큰 문제는 질문 할 올바른 질문을 알지 못한다는 것입니다 ....

어떻게 든 각 행에 대해 고유 한 ID를 어떻게 동적으로 생성합니까? 그렇다면 어떻게 전달할 것인가, 그렇지 않으면 JQuery를 사용하여 각 행을 대상으로하고 사용자가 선택한대로 내용을 담고 있는가?

감사

-

Answer 1

단순히 클래스를 사용하는 것이 좋을 것이다. id="을 class="으로 바꾼 다음 id가 아닌 클릭 한 행을 기반으로 타겟팅하십시오.

var theRow = $(this).closest("tr.myclass"); 
theRow.doSomething(); 

Answer 2

id의 관점에서 보지 마십시오. 나무의 POV에서보세요. DOM 트리의 모든 노드는 부모, 형제, 자식 노드가 어디에 있는지 알고 있습니다. 행에 무언가가 발생하면 클릭 한 모든 위치를 사용하여 "현재 위치"를 식별하고 필요한 관련 데이터를 얻습니다.

<tr> 
    <td>Row 1</td> 
    <td><button click="showRowNumber(this);">click</button></td> 
</tr> 
<tr> 
    <td>Row 2</td> 
    <td><button click="showRowNumber(this);">click</button></td> 
</tr> 
<script type="text/javascript"> 
function showRowNumber(el) { 
    alert($(el).prev().text()); // outputs "Row 1" or "Row 2" 
} 
</script> 

일부 트리 조작 코드는 없습니다.

Answer 3

Kevin은 ID 대신 클래스를 사용해야한다고 말했습니다. 이 경우 click의 클래스 이벤트 핸들러 내부

는 특별히 다음과 같이 클릭 요소를 참조하는 것을 this 등의 사용

$('.toggler').click(function(){ 

    $(this).append('clicked element id: '+this.id); //will show the unique id for the toggled element 
    //$.post(); will want to put your $.post inside to also make use of "this" 
}); 

은 당신도 할 수 배울 수 있도록하기 위해 이 테이블의 셀에 의해이 경우 (td)에 byTagName에 :

$('td').click(function(){ 

    $(this).append('clicked element id: '+this.id); //will show the unique id for the toggled element 
    //$.post(); will want to put your $.post inside to also make use of "this" 
}); 

this의 더 많은 용도 : 테이블에 행을 삭제하거나 추가하는 경우 작업중인 행을 추적해야하는 경우 click 이벤트에서 jQuery 또는 plain JavaScript 만 사용하여 다음과 같이 표시 할 수 있습니다. 행 당신은 클릭 : 페이지가로드 당신이 jQuery의 on() 방법을 사용하여 이벤트 위임를 사용해야하는 경우에

$("table tr").click(function(){ 
    alert('jQuery: '+$(this).index()); //jQuery 
    alert('javascript: '+this.rowIndex); //javascript 
}); 

이 마지막 행이 존재하지 않는 경우. 이것은 첫 번째 행 외에 다른 행을 클릭 할 수없는 이유이기도합니다.

$(document.body).on('click', "table tr", function(){ 
    alert('jQuery: '+$(this).index()); //jQuery 
    alert('javascript: '+this.rowIndex); //javascript 
});