확인란을 선택하면 jquery를 사용하여 데이터베이스의 사용자 ID 및 ID에 따라 HTML 표 행에 다른 배경색을 적용한 다음 확인란 선택을 취소합니다. 이전 상태로. 기록을 위해 나는 코드를 요구하지 않고있다. 나는 개념을 요구하고있다.클릭시 HTML 표의 행에 대한 배경색 변경
http://www.freeimagehosting.net/image.php?ef44cf44a5.jpg
당신은 background-color을 설정 css 기능을 사용 후, 테이블 행과 일치하는 선택기를 사용하는 행에서 사용자의 ID를 얻을 수와 색상을 선택합니다. data 메서드를 사용하여 이전 색을 저장할 수 있습니다. 확인란을 선택하지 않으면 데이터를 사용하여 이전 색상을 가져 와서 복원하십시오.
사용자의 ID가 행에 포함되지 않았거나 행과 관련이 없다면 테이블을 변경하고 추가해야합니다. 그렇지 않으면 테이블을 변경해야합니다.
시작하기에 약간의 코드가 있습니다.이 부분이 "확인"부분입니다.
$('tr').each(function() {
var id == $(this)... // get user id
var color = chooseColor(id); // figure out color somehow
$(this).data('previous-color', $(this).css('background-color'));
$(this).css('background-color', color);
});
편집 : 귀하의 의견을 바탕으로, 나는 CSS 클래스는 당신을 위해 더 나은 해결책이 될 수 있습니다 생각한다 - 단지 클래스와 그룹 이름을 지정합니다. 그런 다음 CSS에 .groupX 및 .groupX.active, .groupY 및 .groupY.active 등 다른 CSS 선택기가 있습니다. 그러면 확인란의 행에서 활성 클래스를 추가/제거하면됩니다. "활성"클래스 이름이 가장 의미 론적으로 적절한 지 여부는 알 수 없지만 예제에서는 편리합니다.
CSS
tr.group-ANIM { /* no special formatting */ }
tr.group-ANIM.active { background-color: #f00; }
tr.group-ZZZ { }
tr.group-ZZZ.active { background-color: #0f0; }
$('#toggleBox').click{ function() {
var checked = $(this).filter(':checked').length > 0;
if (checked) {
$('tr').addClass('active');
}
else {
$('tr').removeClass('active');
}
});
모든 행을 변경하려면? – Sarah
@Sarah - 상상할 수있는 테이블의 크기에 따라 다르지만 실행하는 데 시간이 오래 걸릴 것이라고 생각하지 않습니다. 처음에는 페이지를 만드는 속도가 느려지지 않을 것입니다. 질문에 따라 의도적으로 코드를 완성하지 못하게했습니다. 나머지 작업을 어렵게하는 경우 여기 (그리고 @tvanfosson을 사용하여 내 이름을 언급하십시오)라고 말하면됩니다. 색상 선택 방법과 사용자 ID를 얻는 방법을 알아야합니다. – tvanfosson
@Sarah은 - 또한, 나는 색상 대신 개별 사용자의 사용자의 "클래스"에 의존한다면 내 대답은 바꿀 것주의 것 - 나는 경우에 CSS 클래스를 사용하십시오. 개별 사용자가 독립적 인 색상을 사용한다면 클래스 기반 방식이 잘 확장되지 않는다고 생각합니다. – tvanfosson
각 행의 개별 배경색을 저장하는 방법이 문제라고 가정합니다.
개별 속성에 각 색상을 저장할 수 :
<tr bg_checkbox_active="#FFFFFF">
을하지만, HTML 4.x의에서이 작업을 수행 할 W3C 유효한 방법이 없다 (토론 예를 들어, here 참조).
CSS 클래스의 각 행의 색상을 선언한다 마음에 오는 가장 좋은 아이디어 :
....
.row10.active { background-color: #FFFFFF }
.row11.active { background-color: #FAFAFA }
.row12.active { background-color: #BCBCBC }
....
다음 jQuery를 확인란의 상태에 따라 행의 클래스를 전환했다. 코드를 깨끗하게 유지합니다. CSS 구문은 lot 행과 함께 사용될 때 약간의 오버 헤드가 발생하지만 이는 거의 무시할 수 있습니다.
모든 행을 변경하려면 하나의 체크 박스를 업데이트하십시오 : 이것은 CSS로하기가 더 쉽습니다.
....
table.active .row10 { background-color: #FFFFFF }
table.active .row11 { background-color: #FAFAFA }
table.active .row12 { background-color: #BCBCBC }
....
한 다음 테이블의 active 클래스를 전환 할 수 있습니다.
단지이 스타일을 생성하고 난 기본적으로 그들 – Sarah
@Sarah 단지 출력 PHP를 사용하여이 클래스를 만들 수있는 방법, 데이터가 어떻게 생겼는지에 의존하지. –
이론적으로 jQuery 호출을 사용하여이 모든 작업을 수행 할 수 있습니다. TR에 바인드 된 .change() 이벤트를 사용하여 행 클릭을 처리 할 수 있습니다. 당신의 .change() 핸들러 함수 내부
, 당신은 jQuery를 사용하십시오.css() 메서드를 사용하여 각 행의 스타일을 업데이트합니다.
또는 더 나은 행에 대한 클래스를 업데이트 할 .addClass()와 .removeClass() 메소드를 사용합니다. 에 관계없이
http://api.jquery.com/removeClass/
, 페이지가 초기화 될 때 각 행의 배경에 적용되는 고유의 스타일이나 클래스가해야 할 것입니다.
확인란에 이미 행에 대응하는 ID가 있습니까? 아니 하나 개의 체크 박스 –
나는 단지 그것을 수있는 문제 또는 느린 스크립트를 야기 하나 관심을 가지고 – Sarah