passer var à fonction() js avec jquery

Question

Juste à la recherche de la meilleure façon de faire. J'ai une table listant des informations et dans la dernière colonne est un bouton avec "Edit/View". Lorsque l'utilisateur clique sur le bouton une zone div apparaît avec plus d'informations que vous pouvez modifier

code ci-dessous avec quelques fragments de jstl

<script type="text/javascript"> 
//Click on Edit/View on table 
$('.viewCustomer').click(function() 
{ 
    ....... 
}); 

</script> 

<tr class="odd"> 
    <td>${customerBean.comName}</td> 
    <td>${customerBean.comCode}</td> 
    <td class="noRightPad"> <input type="submit" name="createBut" value="View/Edit" class="viewCustomer" /> </td> 
</tr> 

Ma question serait:

(1) comment puis-je passer une variable à fonctionner $ («viewCustomer »). cLICK (fonction()

(2) est-ce la meilleure façon d'aller sur le point de le faire. est-il plus efficace/sécurisé/propre de faire cela?

Cheers Alexis

Answer 1

La fonction de clic ne sera pas appelée par vous. Il est appelé lorsque le bouton est cliqué, et en tant que tel a l'objet d'événement qui lui est passé:

$('.viewCustomer').click(function(evt){ 
    ....... 
}); 

Qu'est-ce que vous exactement désireux de passer? Vous pouvez accéder à l'élément DOM que vous cliquez en utilisant this et $(this), alors peut-être qu'il est possible de faire référence à ce que vous voulez ici.

EDIT Pour des commentaires

si l'utilisateur a cliqué sur le bouton était dans la 4ème ligne de la table et cette ligne l'autre Colum avait id client 1234 je veux passer le variables 1234.

REMARQUE: Aucun des ci-dessous a été testé, mais devrait suffire

Supposons que votre colonne 'id client' ait un nom de classe 'customerid'. Donc, votre code HTML peut être:

<tr class="odd"> 
    <td>${customerBean.comName}</td> 
    <td class="customerid">${customerBean.comCode}</td> 
    <td class="noRightPad"> <input type="submit" name="createBut" value="View/Edit" class="viewCustomer" /> </td> 
</tr> 

Le jQuery pourrait ressembler à:

$('.viewCustomer').click(function(){ 
    var $buttonCell = $(this).parent(); //the <td> containing the button 
    var $buttonRow = $buttonCell.parent(); //the <tr> containing the button and your customer id 
    var $customerIdCell = $buttonRow.find("td.customerid"); 
    var customerId = $customerIdCell.text(); 
}); 

Ce qui précède est proken vers le bas en lignes pour vous montrer comment les choses est en cours de récupération. En utilisant « enchaînant » on peut l'exprimer de façon plus concise:

$('.viewCustomer').click(function(){ 
    var customerId = $(this).parent().parent().find("td.customerid").text(); 
} 

Vous pouvez également rechercher la cellule customerid comme un « frère » de la pile bouton pour une approche encore plus concise (et un appel de fonction moins).

$('.viewCustomer').click(function(){ 
    var customerId = $(this).parent().siblings("td.customerid").text(); 
}