동일한 열의 tds에 배경색을 설정할 수 있습니까?

저는 현재 한 번에 1 열에 대해 tds를 강조 표시 할 수있는 프로젝트에 참여하고 있습니다. 다른 열에 강조 표시가없는 경우 열이 허용됩니다. 미리 감사드립니다. 아래에 언급 된 코드가 있습니다. 당신이 원하는이동일한 열의 tds에 배경색을 설정할 수 있습니까?

<style> 
    .highlight { background:yellow; } 
</style> 

<script> 

$(function() { 
    $('td').click(function() { 
     alert(event.target.id); 
     $(this).toggleClass("highlight"); 
    }); 
}); 
</script> 
<%@ page import="java.util.*" %> 
<% 
ArrayList<String> rooms = new ArrayList<String>(); 
rooms.add("GSR_2-1"); 
rooms.add("GSR_2-2"); 
rooms.add("GSR_2-3"); 
rooms.add("GSR_2-4"); 
ArrayList<String> time = new ArrayList<String>(); 
time.add("0800"); 
time.add("0830"); 
time.add("0900"); 
time.add("0930"); 
%> 
<table width="100%" border="1"> 
<% 
    for(int x = 0 ; x<time.size() ; x++){ 
     out.println("<tr>"); 
     for(int y = 0 ; y<rooms.size() ; y++){ 
      out.println("<td id="+rooms.get(y) +">"); 
      out.println(rooms.get(y)+" "+time.get(x)); 
      out.println("</td>"); 
     } 
     out.println("</tr>"); 
    } 
%>

출처

2012-09-23 smallcat31

질문에 대한 대답은 네, 가능합니다. 너 뭐 해봤 니? 너는 무엇에 문제가 있니? –

방을 저장하고 일치시키기 위해 정적 변수를 사용하려고했지만 작동하지 않았습니다. 그 외에도 숨겨진 필드를 사용하여이 값을 저장하려고 생각했습니다. 이것은 가능한가? 감사의 답변 – smallcat31

정적 Java 변수? 자바 스크립트 일을 위해서? 그리고 숨겨진 필드가 필요한 이유는 무엇입니까? 당신은 어떤 형태도 가지고 있지 않습니다. 왜 자바 스크립트 변수가 아닌가? –

인가?

$('td').click(function() { 
    var $td = $(this); 
    $td.closest('table').find('tr').each(function() { 
     $(this).find('td:eq('+$td.index()+')').toggleClass("highlight"); 
    }); 
});

The working demo.

출처

2012-09-23 07:49:56 xdazz

죄송합니다 xdazz, 이것은 내가 무엇을 찾고있는 것이 아닙니다. 내가 필요한 것은 칼럼의 개별 td를 클릭 할 수 있어야한다는 것입니다. 이 td를 클릭하면 다른 열의 다른 tds를 클릭 할 수 없게됩니다. 같은 열에있는 tds 만 클릭 할 수 있습니다. 고마워 어쨌든 – smallcat31

@ KennethLiow 아이디어는 동일합니다, 색인을 사용하여 동일한 열의 td를 선택하십시오. – xdazz

@xdazz : OP는 한 번에 한 열씩만 강조 표시하려고한다고 생각합니다. 열이 강조 표시된 경우 다른 열을 동시에 강조 표시 할 수 없습니다. 현재 열이 강조 표시되어있는 경우 다른 열을 클릭해도 현재 강조 표시된 열을 다시 클릭하여 강조 표시를 제거 할 때까지 아무 것도 수행하지 않아야합니다. – Nope

내가 당신이라면, 모든 열에 대한 클래스를 사용하고이 할 것 :

HTML

<html> 

    <head> 

     <title>Classes</title> 

    </head> 

    <body> 

     <table> 

      <tr> 

       <td class='col1'>11</td> 
       <td class='col2'>12</td> 

      </tr> 
      <tr> 

       <td class='col1'>21</td> 
       <td class='col2'>22</td> 

      </tr> 

     </table> 

    </body> 

</html>

CSS

.highlight { 

    /* your style here*/ 
    background: #00aa00; /* demo highlight*/ 

} 
td { 

    padding: 2px; 

}

jQuery를

$("table tr td").on("click", function(){ 

    var clss = $(this).attr('class'); 
    var selector = "table tr td." + clss; 
    if (clss.match(/highlight/)) { 
     $(".highlight").removeClass("highlight"); 
    } else if ($(".highlight").size() == 0) { 
     $(selector).addClass("highlight"); 
    } 
});

편집 : 여기에 작업 jsFiddle입니다 :

이

http://jsfiddle.net/qUcPK/2/

출처

2012-09-23 08:43:39

동일한 열의 tds에 배경색을 설정할 수 있습니까?

답변

관련 문제