Html table with a button on each line

Question

Hey guys. I have a table with several rows and one column. Each table cell has a button in it. Like this:

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

What I want to do: when one of the buttons is pressed, I would like to change its value from "Change" to "Change". Any idea?

Answer 1

Pretty sure this decides what you are looking for:

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

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

Edit:

Apparently, I should have looked at your sample code first;)

You need to change (at least) the ID attribute of each element. The identifier is a unique identifier for each element on the page, which means that if you have several elements with the same identifier, you will get conflicts.

Using classes, you can apply the same logic to multiple elements without any conflict.

JSFiddle example

Answer 2

Place one listener in a table. When it receives a click from the input with a button that has the name "edit" and the value "edit", change its value to "modify". Get rid of the input id (they are not used for anything here) or make them unique.

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