Jquery: comment savoir quelle ligne est sélectionnée?

J'ai une table avec des éléments de lignes changeant dynamiquement.Jquery: comment savoir quelle ligne est sélectionnée?

Parmi les rangées, il y a un petit bouton/lien pour chaque unité.

Par exemple,

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

Ce que je veux est que lorsque je clique sur le bouton de lien, j'ai besoin de savoir quelle ligne est sélectionnée? Quelqu'un peut-il me donner des indications sur la façon dont cela peut être fait?

Votre aide sera grandement appréciée.

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

Source

2010-10-20 BinCode

Pouvez-vous poster le code HTML? Il y a plusieurs façons de le faire et il sera plus facile de répondre à votre question. – Wade73

ok je posterai le html – BinCode

Je sais que vous demandez la index de ligne, il y a des utilisateurs qui vous ont donné la réponse. Mais, généralement, nous avons besoin de l'identifiant de la ligne, car l'identifiant appartient à un identifiant dans la base de données. Dans ce cas, vous pouvez utiliser l'identifiant de la cellule ou le bouton lui-même. Exemple:

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

Vous avez ce ici:

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

Source

2010-10-20 10:22:08 netadictos

très proche de ce que je voulais j'ai ajouté mon code à la qs. – BinCode

J'ai mis à jour mon code, mais ne fonctionnera que si vous incluez l'identifiant dans le tr. Sinon, vous pouvez choisir l'option "index()". – netadictos

Merci de vérifier cela !! – BinCode

Vous pouvez passer de this (le bouton cliqué) dans le gestionnaire et utiliser .closest() pour obtenir le <tr> du bouton puis saisir tout ce que vous voulez à partir de là, par exemple:

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

Pour une liste complète des fonctions de "déplacement", consultez la section Tree Traversal section of the API.

Source

2010-10-20 10:06:14

Merci, il fonctionne très bien seul mais je ne peux pas comprendre comment le faire fonctionner sur le projet en réalité. Je suis encore dans les étapes d'apprentissage de ceci. – BinCode

Ce que j'ai, c'est que je génère une table à partir d'une réponse JSON en appelant une requête REST. Ce que je veux maintenant, c'est que lorsque je clique sur l'un des boutons ou un lien associé aux lignes, demande d'obtenir une information beaucoup plus détaillée. Comment ferais-je cela? – BinCode

Je suppose que vous utilisez ...

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

Donc, dans ce cas, vous pouvez simplement trouver à l'intérieur some_function comme ceci:

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

Source

2010-10-20 10:07:28

Ceci obtiendrait * tous * les ancêtres '', s'il s'agissait d'une table imbriquée par exemple. –

Fonctionnera correctement en fonction du code HTML fourni. –

Jquery: comment savoir quelle ligne est sélectionnée?

Répondre

Questions connexes