셀 색상을 개별적으로 또는 그룹으로 전환하는 방법

우리는 말 (nxm 행렬)이있는 간단한 테이블을 가지고 있으며 사용자는 다음 조건에 따라 임의로 항목 집합을 선택합니다.셀 색상을 개별적으로 또는 그룹으로 전환하는 방법

우리 레이아웃

<table> 
    <thead> 
     <tr> 
      c:forEach 1...31 
      <th></th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> // could be 30 | 40 | 50 rows 
      <td>1...31</td> // Just mentioned that there would be as much cells as looped on the c:forEach above 
     </tr> 
    </tbody> 
</table>

가] 셀 선택에서 우리는 황색, 청색의 컬러 셀 (즉,)를 플립 싶은이 (단지 의사 코드)와 같다. 특정 셀 선택에서 색상이 전환되어야합니다. b] 사용자가 헤더 패널을 선택하면 (예 : 1 ... 31 사이의 모든 항목) 해당 열 (즉, 해당 열의 모든 셀)이 파란색, 노란색으로 전환되어야합니다.

보이지 않는 확인란을 사용하여 이것을 생각했습니다 ,하지만 우리는 javascript (우리는 jquery를 사용합니다) 로직을 선택하고 선택을 해제하지 않았습니다. 이 기능을 구현하려면 여기에 포인터가 필요합니다.

출처

2010-07-16 Sam

당신은 적절한 CSS 클래스 추가 한 후, 같은 것을 할 수있다 : 세포

거래 : 열

$('table#yourtable').find('tbody td').click(function(){ 
    $(this).toggleClass('yellow'); 
    // flip yellow on or off 
    // you can figure out how to deal with other states 
});

거래 :

$('table#yourtable').find('thead th').click(function(){ 
    var col = $(this).prevAll().length; // had siblings, should be prevall 
    $('table#yourtable').find('tbody tr').each(function(){ 
     $(this) 
      .find('td:eq('+col+')') // nth column 
      .removeClass('yellow blue neutral') // reset colors 
      .addClass('green'); // add a color 
    }); 
});

테스트하지, 이것은 의심 할 여지없이 수 추가로 최적화 할 수 있지만 몇 가지 아이디어를 제공해야합니다.

출처

2010-07-16 05:06:31

올바른 값을 반환하지 않습니다 :'var col = $ (this) .siblings(). length + 1;'. 형제는 요소의 양쪽을 봅니다. 10 열이있는 열 2를 클릭하면 2가 아닌 10이 반환됩니다. –

그래, 날 잡았어. 미리 업데이트했습니다. –

니티 피키는 아니지만'.find ('td : eq (col)')'에 연결이 없습니다. 그것이 편집 전에 거기에 있었는지 또는 내가 처음으로 그것을 놓친 지 확실하지 않습니다. –

jQuery는 훌륭한 라이브러리입니다. nth-child() 선택기를 사용하여 열과 같은 항목을 검색 할 수 있습니다. 이런 식으로 뭔가 :

$('table thead th').click(function() { 
    // Quick access to the index of this column. 
    // Add an extra 1 to this because later nth-child is 1-indexed. 
    var idx = $(this).prevAll('th').size() + 1; 

    $('table tbody tr td:nth-child(' + idx + ')').css({ 
    'background-color': 'green' 
    }); 
})

일반적인 접근 방식으로. 어떤 종류의 논리 처리를 원하는지 그리고 색상이 어디에 맞는 지 모르겠지만 이것이 도움이 될 것입니다.

출처

2010-07-16 04:56:36

셀 색상을 개별적으로 또는 그룹으로 전환하는 방법

답변

관련 문제