Jquery : how to know which row is selected?_问答_开发者

I have a table with dynamically changing rows items.

Among the rows there is a small button / link for each unit.

   Data1 | LinkButton
   Data2 | LinkButton
   Data3 | LinkButton 
   Data4 | LinkButton
   Data5 | LinkButton 
   Data6 | LinkButton

What i want is that when i click on the link button ,i need to know which row is selected?Can any one give me pointers on how that can be done?

You help will be greatly appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="css/main.css" type="text/css" media="screen, projection" rel="stylesheet" />


</head>
<body><center>
        <div id="message" style="display: none;">
        </div>
        <div id="waiting" style="display: none;">
            Please wait<br />
            <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
        </div>
        <form action=""  id="searchForm">
            <label for="search">Matter Search:</label> <input type="text" name="search" id="search" />
            <input type="submit" id="submit" value="Submit" />
            <a href="#">Link</a>
        </form>

        <div id="matterTableDiv"  style="display: none;">
            List of Matters
            <table id="matterTable"   border="1">
                <thead>
                <th>Matter Names</th>
                <th>Matter Number</th>
                <th>Description</th>
                <th></th>
                </thead>
                <tbody>

                </tbody>

            </table>
        </div>
        <div id="matterDetailTableDiv" style="display: none;">
            Matter Detail Table
        </div>
        <script type="text/javascript" src="js/json2.js"></script>
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){


                $('#search').focus();

                $('#submit').click(function(){



                    $('#message').hide(200);
                    $("#matterTableDiv").hide(200);
                    $("#matterTable tbody").text("");
                    $('#waiting').show(200);
                    $('#searchForm').hide(200);
                    $.ajax({
                        type : 'POST',
                        url : 'post.php',
                        dataType : 'json',
                        data: {
                            search : $('#search').val()
                        },
                        success : function(data){
                            if(data.msg == "[]" ){
                                $('#waiting').hide(200);
                                $('#message').removeClass().addClass('error')
                                .text('There was an error.').show(200);
                                $('#searchForm').show(200);

                            }

                            $('#waiting').hide(200);
                            $('#matterTableDiv').removeClass().addClass((data.error === true) ? 'error' : 'success')
                            if(data.error == false){

                                var str = JSON.parse(data.msg);
                                $("#matterTableDiv").show(200);
                                //alert("List :" + str.length);
                                //alert("List :" + str.toString());
                                $("#matterTable").html();

                                $.each(str, function(key, value) {
                                    var tblRow =
                                        "<tr>"
                                        //+"<td><a id="+key+" href='#dbID="+value.dbID+"&matID="+value.matterID+">"+value.matterInfoSortName+"</a></td>"
                                        +"<td>"+value.matterInfoSortName+"</td>"
                                        +"<td>"+value.matterInfoMatterNum+"</td>"
                                        +"<td>"+value.matterInfoFileDesc+"</td>"
                                        +"<td><input type='button' value="+value.matterInfoFileDesc+"></td>"
                                        +"</tr>";
                                    $(tblRow).appendTo("#matterTable tbody");
                                    //alert(key + ': ' + value.matterInfoSortName);

                                });

                                $("button").live("click",function(){
                                     var row = $(this).closest("tr");
                                     var rowIndex = row.index();
                                     alert(rowIndex);
                                });

                            }else{
                                $('#message').removeClass().addClass('error')
                                .text('There was an error.').show(200);
                            }

                            $('#searchForm').show(200);

                            if (data.error === true)
                                $('#searchForm').hide(200);
                        },
                        error : function(XMLHttpRequest, textStatus, errorThrown) {
                            $('#waiting').hide(200);
                    开发者_开发百科        $('#message').removeClass().addClass('error')
                            .text('There was an error.').show(200);
                            $('#searchForm').show(200);
                        }
                    });

                    return false;
                });


            });


        </script>

    </center>
</body>

I know that you ask for the row index, there are users that have given you the answer. But, usually we need the id of the row, because the id belongs to an id in the database. In this case, you could use the id of the cell or the button itself. Example:

  <table>
   <tr  id="Data1"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
    <tr  id="Data2"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
    <tr  id="Data3"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
    <tr  id="Data4"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
    </table>

    $("input[type=button]").live("click", function() {
       var row = $(this).closest("tr");
       var rowId = row.attr("id");
        alert(rowId);
    });

You have this here:

http://www.jsfiddle.net/dactivo/YD3xy/

You can go from this (the clicked button) in the handler and use .closest() to get the <tr> of the button then grab anything you want from there, for example:

$(".someButton").live("click", function() {
   var row = $(this).closest("tr");
   var rowIndex = row.index();
});

For a full list of "moving-around" functions like this, check out the Tree Traversal section of the API.

I am guessing you are using...

$('.all_links').click(some_function)

So in that case, you can simply find it from inside some_function like so:

function some_function() {
    $(this).parents('tr'); // this will give you the link's row.
}

Jquery : how to know which row is selected?

精彩评论

关注公众号

热门标签

图文推荐

Jquery : how to know which row is selected?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：