Question

我有一个动态更改行项目的表。

在每行中都有一个小按钮/链接。

例如

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

我想要的是，当我点击链接按钮时，我需要知道选择了哪一行？任何人都可以指出如何做到这一点？

您将非常感谢您的帮助。

<!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>

Answer 1

您可以从处理程序中的this（单击按钮）开始，然后使用.closest()获取按钮的<tr>，然后从中抓取任何内容，例如：< / p>

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

有关此类“移动”功能的完整列表，请查看Tree Traversal section of the API。

Answer 2

我知道您要求行索引，有些用户已经给您答案。但是，通常我们需要行的id，因为id属于数据库中的id。在这种情况下，您可以使用单元格的ID或按钮本身。例如：

  <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);
    });

你有这个：

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

Answer 3

我猜你正在使用......

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

因此，在这种情况下，您可以从some_function内部找到它，如下所示：

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

Jquery：如何知道选择哪一行？

3 个答案: