Lignes de tableau cliquables liées au bouton

Question

Mon projet MVC 4 comporte une table d'informations et j'utilise actuellement deux zones de saisie pour que l'utilisateur entre l'ID de stratégie (l'un des champs de ma table), puis j'utilise PolicyIds pour sélectionnez les politiques et envoyez-les dans ma vue pour les comparer. J'ai lu des lignes de table cliquables, mais la plupart du temps vu des gens faisant une seule ligne de table sélectionnable qui ouvre un lien.

Je voudrais faire ma table pour me permettre de sélectionner deux rangées et puis cliquer sur un bouton pour comparer les rangées plus en détail. Donc je voudrais qu'il récupère PolicyId pour chaque ligne sélectionnée afin que je puisse les passer dans ma vue MVC qui est configurée pour ma comparaison plus profonde.

J'ai vu certaines personnes parler d'utiliser des cases à cocher, mais la plupart des implémentations que j'ai vues étaient très glitchy. D'après mes recherches, la plupart des gens semblent suivre la voie jQuery/javascript. Je suis nouveau à la programmation de Web et ai seulement l'expérience de HTML et de CSS. Donc, si quelqu'un sait de bonnes références sur la façon de le faire de la manière la plus basique possible (jQuery/javascript OK, si pas trop complexe) ou utilise une ligne entière comme zone de texte et stocke les résultats ou toute autre solution créative , ce serait apprécié! Merci!

Voici quelques-uns de mes extraits de code de mon fichier html:

@using (Html.BeginForm("FindPolicyRequests", "RequestResponse", FormMethod.Post, new { id = "ServiceRequestResponseETO" })) 
{  
    <div style="float: left;"> 
     Insurance Policy Identifier: @Html.TextBox("polId")<input class="findbutton" id="findExecute" type="submit" value="Find" /> 
    </div> 
} 
@using (Html.BeginForm("SrrCompare", "RequestResponse", FormMethod.Post, new { id = "ServiceRequestResponseETO" })) 
{  


    <div style="float: right; width: auto;"> 
      <b style="text-align: left; float: left;">Compare Responses:</b> 
      <b style="text-align: left; float: left;">SRR Identifier 1:</b> @Html.TextBox("polId1")<br /> 
      SRR Identifier 2: @Html.TextBox("polid2") 
      <input class="findbutton" type="submit" value="Compare" /> 
    </div> 
} 

. 
. 
. 

<table class="srrTable"> 
        <tr style="font-weight: bold"> 
         <th>PolicyId 
         </th> 
         <th>DataText 
         </th> 
        </tr> 
        @foreach (var item in Model) 
        { 
         <tr> 
          <td> 
           @Html.DisplayFor(modelItem => item.PolicyId) 
          </td> 

          <td> 
           @Html.DisplayFor(modelItem => item.DataText) 
          </td> 
         </tr> 
        } 
       </table> 

Answer 1

Ajoute la policyId de la ligne ciblée à un tableau. Regardez-le dans Firebug, j'espère que ça aide.

(function($) { 

    var $table = $(document.getElementById('data')), 
     policyIds = []; 

    $table.on('click', 'tr', function() { 

    var $this = $(this); 
    policyIds.push(parseInt($this.find('td:nth-child(1)').text(), 10)); 

    console.log(policyIds); 

    }); 

})(jQuery); 

http://jsbin.com/iquvab/1/

Mise à jour avec fonction de basculement, voir http://jsbin.com/akudex/1/edit