Home/ Questions/Q 3242658
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T18:20:28+00:00

I have a table with dynamically changing rows items. Among the rows there is

  • 0

I have a table with dynamically changing rows items.

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

Eg 

   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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0