我可以爲同一列中的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變量？對於JavaScript的東西？爲什麼你需要一個隱藏的領域？你沒有任何形式。爲什麼不只是一個JavaScript變量？ –

這是你想要什麼？

$('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只希望能夠一次突出顯示1列。如果某列突出顯示，則不能同時突出顯示其他列。如果某列當前突出顯示，則單擊任何其他列應該不會執行任何操作，直到再次單擊當前突出顯示的列以刪除突出顯示爲止。 – 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設置背景顏色嗎？

回答

相關問題