테이블 러에서 행 선택
-
20-09-2019 - |
문제
I 사용자 테이블 리터 내 프로젝트에서 jQuery 플러그인 (다른 것에 대해 알고 있습니다). 사용자가 행을 클릭하면 선택이 선택되는 기능을 추가해야합니다. 다음 코드를 시도했지만 작동하지 않습니다.
$('#myTable tr').click(function(event) {
$(this).addClass('selected');
});
누구든지 가장 좋은 방법을 말해 줄 수 있습니까? 이미 플러그인이 있습니까?
미리 감사드립니다.
압델 올라 카라
해결책
테이블 러가 전체 테이블을 재현하여 TR에 첨부 된 클릭 이벤트를 "파괴"할 때 변화가없는 이유가 될 수 있다고 생각합니다. 라이브 이벤트를 사용하여 시도하고 그것이 작동하는지 확인해야합니다. jQuery.com에서 라이브 이벤트 문서
다른 팁
jQuery의 토그 클래스를 통해 선택 및 선택치를 활성화하려면 :
$(document).ready( function() {
/* jQuery v1.11.1 */
$( "table.tablesorter tbody tr" ).click(function() {
$( this ).toggleClass( "selected" );
});
});
/* CSS for hover row & select/lock the row with color */
table.tablesorter tbody tr:hover td {
background-color: #f4f5f6;
}
table.tablesorter tbody tr.selected td {
background-color: #f4f5f6;
}
그것은 나에게 맞아 보인다. tr.Selected에 대해 정의 된 CSS 클래스가 있습니까?
클릭 할 때 TR이 아닌 TD 요소를 쳤을 수도 있습니다. 부모를 사용해야 할 수도 있습니다.
http://docs.jquery.com/traversing/parent
이와 같은 것 (테스트되지 않은) :
$('#myTable td').click(function(event) {
$(this).parent("tr").addClass('selected');
});
당신이 가지고있는 것은 올바른 것 같습니다. 문서가 준비된 후 실행하고 있습니까?
$(function() {
$('#myTable tr').click(function() {
$(this).addClass('selected');
});
});
또는 사용할 수 있습니다 live
이벤트.
$('#myTable tr').live('click', function() {
$(this).addClass('selected');
});
클릭 이벤트가 내 테이블에서 잘 작동하는 것 같습니다. 다시 클릭하여 어떻게 선택 해제 할 것인지 궁금합니다. 변수를 선택하는지 여부에 연결하는 것은 쉬운 솔루션처럼 보이지만 어떻게해야합니까?
다른 질문과 JS에 대한 새로운 질문으로 당신의 질문에 대답하는 것을 용서하십시오.