查找表中的行

Question

I have the following setup

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

On the click of the button, I want to read the row number entered in the textbox and highlight that row. Eg if user enters 4, highlight 4th row. If row number is invalid, alert user to enter valid number.

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

How do I find the row and highlight it?

Answer 1

Use :eq(...) selector:

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

tr:eq(0) will select the header row.

JSFIDDLE

Answer 2

You can try this :

 $("#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");
     }
 });

Note that you should validate user entry (here with parseInt()) to avoid code injection or any kind of unexpected behavior.

Answer 3

This fits a situation slightly different than yours, but it is an alternative approach. It has a nice feature ( intentional bug? ) where it also works for names, release years, etc...

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
}

Screenshot...