Question

我有这张桌子，

    | A   | B   | C   | D   | E   | F   |
-----------------------------------------
1   |     |10/09|11/09|12/09|13/09|14/09|
2   |Joy  |Fail |     |Pass |     |Fail |
3   |Jay  |     |Pass |Fail |     |Pass |
4   |John |Fail |     |Pass |Fail |     |
5   |Jess |Fail |Pass |Pass |Fail |Fail |

我想从范围A：2 - A：4获得TD。 A：2 - A：4是用户输入的值。所以有时它可以是B：2 - B：6或其他范围。

我有这段代码，

var l = parseInt($("#dd2").val())+2;
            var f = parseInt($("#dd1").val())+1;
            for(var f2 = f; f2<l;f2++){
                $("#table table tbody tr:lt("+f2+"):gt("+(f2-2)+")").children().eq(1).css("border-top","3px solid gray").css("border-left","3px solid gray");
            }

其中dd1是第一行（在示例中，它是第2行），dd2是最后一行（在示例中，它是第4行）。我对上面的代码所做的只是获取第一列。因此它不会从其他列中选择其他TD。

此外，如果范围来自B：2 - F：2等列，我还需要处理代码。

Answer 1

我在你的问题上略微试了一下。

起初还不太清楚。但我想我明白了你想要的东西看看我的CodePen。

当您点击某个日期时，该列会突出显示当您点击学生姓名时，行高亮。

如果通过，则单元格为绿色如果失败，则单元格为红色如果学生缺席，则该单元格为黄色。

<强>脚本

$(".student").click(function(){

    // Reset
    $(".result").css({"background":"none","border":"1px solid black"});

    // Select a row
    $(this).siblings(".result").css({"border-top":"2px double black","border-bottom":"2px double black"});
    $(this).siblings(".result").each(function(){
        if( $(this).html() == "Fail" ){
            $(this).css("background","red");
        }else if( $(this).html() == "Pass" ){
            $(this).css("background","green");
        }else{
            $(this).css("background","yellow");
        }
    });
});

$(".date").click(function(){
    var thisRowis = $(this).index();

    // Reset
    $(".result").css({"background":"none","border":"1px solid black"});

    // Select a column
    $(".student").each(function(){
        var thisDate = $(this).siblings(".result").eq(thisRowis-2);
        thisDate.css({"border-left":"2px double black","border-right":"2px double black"});
        if( thisDate.html() == "Fail" ){
            thisDate.css("background","red");
        }else if( thisDate.html() == "Pass" ){
            thisDate.css("background","green");
        }else{
            thisDate.css("background","yellow");
        }
    });
});

<强> HTML

<table>
    <tr>
        <th></th>
        <th class="col">A</th>
        <th class="col">B</th>
        <th class="col">C</th>
        <th class="col">D</th>
        <th class="col">E</th>
        <th class="col">F</th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th class="date">10/09</th>
        <th class="date">11/09</th>
        <th class="date">12/09</th>
        <th class="date">13/09</th>
        <th class="date">14/09</th>
    </tr>
    <tr class="row">
        <th class="row">1</th>
        <td class="student">Joy</td>
        <td class="result">Fail</td>
        <td class="result"></td>
        <td class="result">Pass</td>
        <td class="result"></td>
        <td class="result">Fail</td>
    </tr>
    <tr class="row">
        <th class="row">2</th>
        <td class="student">Jay</td>
        <td class="result"></td>
        <td class="result">Pass</td>
        <td class="result">Fail</td>
        <td class="result"></td>
        <td class="result">Pass</td>
    </tr>
    <tr class="row">
        <th class="row">3</th>
        <td class="student">John</td>
        <td class="result">Fail</td>
        <td class="result"></td>
        <td class="result">Pass</td>
        <td class="result">Fail</td>
        <td class="result"></td>
    </tr>
    <tr class="row">
        <th class="row">4</th>
        <td class="student">Jess</td>
        <td class="result">Fail</td>
        <td class="result">Pass</td>
        <td class="result">Pass</td>
        <td class="result">Fail</td>
        <td class="result">Fail</td>
    </tr>
</table>

使用jquery按范围选择表TD

1 个答案: