Tabla HTML con botón en cada fila

Question

Hola chicos. Tengo una tabla con varias filas y una columna. Cada celda de la tabla tiene un botón. De esta manera:

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

Lo que quiero hacer: cuando se presiona uno de los botones me gustaría cambiar su valor de "Editar" a "Modificar". ¿Alguna idea?

Answer 1

Bastante seguro de que esto resuelve lo que estás buscando:

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 (jQuery):

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

Editar:

Aparentemente debería haber mirado primero el código de muestra;)

Debe cambiar (al menos) el atributo ID de cada elemento. El ID es el identificador único para cada elemento en la página, lo que significa que si tiene varios elementos con el mismo ID, obtendrá conflictos.

Al usar clases, puede aplicar la misma lógica a múltiples elementos sin ningún conflicto.

JSFiddle sample

Answer 2

Deja un único oyente sobre la mesa. Cuando recibe un clic de una entrada con un botón que tiene un nombre de "editar" y un valor de "editar", cambie su valor a "modificar". Deshágase de la identificación de la entrada (no se usan para nada aquí), o haga que sean únicos.

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