2012-06-21 3 views
0

하나의 페이지에 여러 개의 테이블이 있습니다.jQuery에서 테이블 행을 조작하는 방법

다른 모든 행뿐만 아니라 CSS에서 입력이 불가능한 입력 불가능한 데이터의 스타일을 강조하고 있습니다.

아래 코드는 현재 사용하고있는 코드입니다. 편집 가능한 데이터가있는 열은 흰색과 금색이 번갈아 표시됩니다. 편집 할 수없는 데이터가있는 열은 회색과 금색으로 번갈아 표시됩니다. (당신은 지금,이 그리드에서 편집 할 수있는 컬럼과 같은 시각적 표시기의 충분.)

$(document).ready(function() 
{ 
    $("tr:even").css("background-color", "#DEDEBC"); 
    $("tr:even input").css("background-color", "#DEDEBC"); 
}); 

CSS

input[disabled='disabled'] { 
    text-decoration:none; 
    text-indent:5px; 
    color:#006; 
    border:none; 
    -webkit-box-shadow:0 0 0 #666 inset; 
    -moz-box-shadow:0 0 0 #666 inset; 
    box-shadow:0 0 0 #666 inset; 
} 

난 정말에서만 테이블의 1이 동작을 원하는 현재 작업중인 페이지 (두 번째 테이블)이지만 jquery에 익숙하지 않습니다. 다른 페이지에서는 여러 개의 테이블 중에서 2 ~ 3 개의 테이블을 필요로합니다.

또 다른 문제는이 코드가 테이블에서 홀수 - 짝수 결정을 계속한다는 것입니다. 이전 표의 마지막 행이 짝수 인 경우 다음 표의 첫 번째 행은 홀수로 간주되고 반대의 경우도 마찬가지입니다.

jQuery를 수정하여 특정 테이블을 선택하려면 어떻게해야합니까? 새 테이블로 어떻게 다시 시작할 수 있습니까?

+0

왜 CSS를 포함 시켰습니까? – iambriansreed

+0

인라인 대신 클래스를 추가하면 "선택한 행"스타일링과 같은 이후 상호 작용에 더 간단 해집니다. – charlietfl

답변

2

클래스에 색을 지정하려는 테이블 만 지정하십시오. colorize.
이와 jQuery 코드를 교체 :

$(function(){ 
    $('table.colorize').each(function(){ 
     $('tr:even, tr:even input', this).css("background-color", "#DEDEBC"); 
    }); 
}); 

이는 당신이 클래스를 정의하는 테이블을 색칠하고 심지어 각 테이블에 대해 재설정됩니다.

+0

Thnx iambriansreed. 완벽하게 일했습니다. – Kaycee

+0

@Kaycee 답변을 수락하십시오. 체크 표시를 클릭하십시오. – iambriansreed