Html table with button on each row

Question

I have a table with multiple rows and one column  Each table cell has a button in it  Like this    lt table id  table1  border  1  gt       lt thead gt         lt tr gt             lt th gt Select lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt          lt tr gt               lt td gt                  lt form name  f2  action  javascript select      gt                   lt input id  edit  type  submit  name  edit  value  Edit    gt                  lt  form gt              lt  td gt         lt  tr gt      lt  tbody gt   lt  table gt    What I want to do  when one of the buttons is pressed I would like to change its value from  Edit  to  Modify    Any idea

User · Answer

Pretty sure this solves what you re looking for   HTML    lt table gt       lt tr gt  lt td gt  lt button class  editbtn  gt edit lt  button gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt button class  editbtn  gt edit lt  button gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt button class  editbtn  gt edit lt  button gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt button class  editbtn  gt edit lt  button gt  lt  td gt  lt  tr gt   lt  table gt    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 ID is the unique identifier for each element on the page  meaning that if you have multiple items with the same ID  you ll get conflicts    By using classes  you can apply the same logic to multiple elements without any conflicts   JSFiddle sample

User · Answer

Put a single listener on the table  When it gets a click from an input with a button that has a name of  edit  and value  edit   change its value to  modify   Get rid of the input s id  they aren t used for anything here   or make them all unique    lt script type  text javascript  gt   function handleClick evt      var node   evt target    evt srcElement    if  node name     edit         node value    Modify           lt  script gt    lt table id  table1  border  1  onclick  handleClick event    gt       lt thead gt         lt tr gt             lt th gt Select      lt  thead gt       lt tbody gt          lt tr gt               lt td gt                  lt form name  f1  action      gt                   lt input id  edit1  type  submit  name  edit  value  Edit  gt                  lt  form gt          lt tr gt               lt td gt                  lt form name  f2  action      gt                   lt input id  edit2  type  submit  name  edit  value  Edit  gt                  lt  form gt          lt tr gt               lt td gt                  lt form name  f3  action      gt                   lt input id  edit3  type  submit  name  edit  value  Edit  gt                  lt  form gt       lt  tbody gt   lt  table gt

[javascript] Html table with button on each row

Examples related to javascript

Examples related to html-table