在表中查找行

Question

我有以下设置

http://jsfiddle.net/ZkeTD/2/

单击该按钮，我想读取在文本框中输入的行号并突出显示该行。例如，如果用户输入4，则突出显示第4行。如果行号无效，请提醒用户输入有效号码。

$("#btn").click(function(){
    var num = $("#inp").val();
});

如何找到该行并突出显示它？

Answer 1

使用:eq(...)选择器：

$("#btn").click(function(){
    var num = $("#inp").val();
    $("tr").css("background", "transparent");
    $("tr:eq(" + num + ")").css("background", "red");
});

tr:eq(0)将选择标题行。

JSFIDDLE

Answer 2

你可以试试这个：

 $("#btn").click(function(){
     var num = parseInt($("#inp").val());
     if (num) {
         var row = $("#movie tr:nth-of-type(" + num + ") td");
         if (row.length == 0) {
             alert("Invalid row number");
         } else {
             row.css("background", "yellow");
         }
     } else {
         alert("Invalid row number");
     }
 });

请注意，您应该验证用户条目（此处使用parseInt（））以避免代码注入或任何类型的意外行为。

Answer 3

这适合与您的情况略有不同的情况，但它是另一种方法。它有一个很好的功能（故意的错误？），它也适用于名称，发行年份等...

jsFiddle： http://jsfiddle.net/digitalextremist/Q7HYE/

$(document).ready( function() {
    $("#btn").on( "click", function(){
        $("td").removeClass("highlight")
        var num = $("#inp").val();
        console.log( "search: " + num )
        if ( $("td:contains(" + num + ")").length > 0 )
            $("td:contains(" + num + ")").closest("tr").addClass("highlight");
        else
            alert("Not found.")
    });
})

<强> CSS：

.highlight {
    background: #f00;
    color: #fff
}

<强>截图...