HTML таблица с кнопкой на каждой строке

Question

У меня есть таблица с несколькими строками и одним столбцом. В каждой ячейке таблицы есть кнопка. Как это:

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

Что я хочу сделать: когда нажата одна из кнопок, я бы хотел изменить ее значение с «Изменить» на «Изменить». Есть идеи?

Answer 1

Уверен, это решает то, что вы ищете:

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');
    });
});

Изменить:

Очевидно, я должен был сначала взглянуть на ваш пример кода;)

Вам необходимо изменить (как минимум) атрибут ID каждого элемента. Идентификатор является уникальным идентификатором для каждого элемента на странице, что означает, что если у вас есть несколько элементов с одинаковым идентификатором, вы получите конфликты.

Используя классы, вы можете применять одну и ту же логику к нескольким элементам без каких-либо конфликтов.

JSFiddle sample

Answer 2

Положите одного слушателя на стол. Когда он получает щелчок от входа с кнопкой, которая имеет имя «изменить» и значение «изменить», измените его значение на «изменить». Избавьтесь от идентификатора ввода (они здесь ни для чего не используются) или сделайте их уникальными.

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