Table Html avec bouton sur chaque ligne

Question

Salut les gars. J'ai une table avec plusieurs lignes et une colonne. Chaque cellule de table a un bouton dedans. Comme ceci:

<table id="table1" border="1"> 
    <thead> 
     <tr> 
      <th>Select</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <form name="f2" action="javascript:select();" > 
       <input id="edit" type="submit" name="edit" value="Edit" /> 
       </form> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Ce que je veux faire: quand l'un des boutons est pressé, je voudrais changer la valeur de « Editer » à « Modifier ». Une idée?

Answer 1

assez sûr ceci permet de résoudre ce que vous cherchez:

HTML:

<table> 
    <tr><td><button class="editbtn">edit</button></td></tr> 
    <tr><td><button class="editbtn">edit</button></td></tr> 
    <tr><td><button class="editbtn">edit</button></td></tr> 
    <tr><td><button class="editbtn">edit</button></td></tr> 
</table> 

Javascript (en utilisant jQuery):

$(document).ready(function(){ 
    $('.editbtn').click(function(){ 
     $(this).html($(this).html() == 'edit' ? 'modify' : 'edit'); 
    }); 
}); 

Edit:

Apparemment, j'aurais dû regarder votre code d'exemple en premier;)

Vous devez modifier (au moins) l'attribut ID de chaque élément. L'identifiant est l'identifiant unique de chaque élément de la page, ce qui signifie que si vous avez plusieurs éléments avec le même identifiant, vous aurez des conflits. En utilisant des classes, vous pouvez appliquer la même logique à plusieurs éléments sans aucun conflit.

JSFiddle sample

Answer 2

Mettez un auditeur sur la table. Quand il obtient un clic d'une entrée avec un bouton qui a un nom de "edit" et une valeur "edit", changez sa valeur pour "modifier". Débarrassez-vous de l'identifiant de l'entrée (ils ne servent à rien ici), ou faites en sorte qu'ils soient tous uniques.

<script type="text/javascript"> 

function handleClick(evt) { 
    var node = evt.target || evt.srcElement; 
    if (node.name == 'edit') { 
    node.value = "Modify"; 
    } 
} 

</script> 

<table id="table1" border="1" onclick="handleClick(event);"> 
    <thead> 
     <tr> 
      <th>Select 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <form name="f1" action="#" > 
       <input id="edit1" type="submit" name="edit" value="Edit"> 
       </form> 
     <tr> 
      <td> 
       <form name="f2" action="#" > 
       <input id="edit2" type="submit" name="edit" value="Edit"> 
       </form> 
     <tr> 
      <td> 
       <form name="f3" action="#" > 
       <input id="edit3" type="submit" name="edit" value="Edit"> 
       </form> 

    </tbody> 
</table>