0

我目前正在从事一个项目，我希望允许一次突出显示 1 列的 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>");
    }
%>

4

2 回答 2

2

这是你想要的吗？

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

工作演示。

于 2012-09-23T07:49:56.487 回答
0

如果我是你，我会为每一列使用一个类并这样做：

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-23T08:43:39.943 回答