Javascript для редактирования строк таблицы

Question

Мне нужна помощь с функцией для моего сайта. Я просто не могу заставить скрипт работать. У меня есть этот сайт: http://imgur.com/oMy69yx Как вы можете видеть, есть одна кнопка «Редактировать» для каждой строки. Цель состоит в том, что когда пользователь нажимает один из них, строка становится редактируемой (кроме имени субъекта), и кнопка изменяется на «Save». Затем пользователь может редактировать все, что захочет, и сохранять его. Когда он нажимает «Сохранить« Я получаю все поля, которые были изменены и обновлены с помощью SQL-запроса. PS: Количество строк не определено, поскольку пользователь может вводить столько строк, сколько захочет.

Так я думал, что в какой-то сценарий, как это:

var button = document.getElementByClassName("clicker"); 
var buttonclicked = function(){ 
    button.textContent = "Save"; //And things get editable}; 
button.addEventListener("click", buttonclicked); 

Но этого не будут работать, потому что кнопка вар массив кнопок, и не будет работать addEventListener с этим ... Что может Я могу это решить?

Это HTML генерации таблицы: (Может быть немного грязный)

<?php $i = 0;?> 
<?php foreach ($rows as $row): ?> 
    <tr class="d1"> 
     <td><?php echo $row["subject"] ?></td> 
     <td> 
      <?php 
       if($row["G1"] != -1) 
        echo $row["G1"];  
      ?> 
     </td> 
     <td> 
      <?php 
       if($row["G2"] != -1) 
        echo $row["G2"];  
      ?> 
     </td> 
     <td> 
      <?php 
       if($row["G3"] != -1) 
        echo $row["G3"];  
      ?> 
     </td> 
     <td> 
      <?php 
       if($row["G4"] != -1) 
        echo $row["G4"];  
      ?> 
     </td> 
     <td> 
      <?php 
       $round = round($row["normal"],2); 
       echo $round; 
      ?> 
     </td> 
     <td><?= $row["creditos"] ?></td> 
     <td><?php echo $row["criteria"];?></td> 
     <td><?php echo "<button id = clicker.$i>Edit</button>"; ?></td> 
    </tr> 
    <?php $i++; ?> 
<?php endforeach ?> 

Answer 1

Вы можете назначить для каждой кнопки с помощью for цикла:

var buttons = document.getElementsByClassName("clicker"); 

var buttonclicked = function(e){ 
    e.target.textContent = "Save"; //And things get editable}; 

for(var i = 0; i < buttons.length; i++) 
{ 
    buttons[i].addEventListener('click', buttonclicked); 
} 

Также обратите внимание, что я работая на e.target в функции buttonclicked, а не button, так что мы получаем правильную кнопку каждый раз.

e является event object, в котором содержится информация о мероприятии onclick. Если вы посмотрите на переменную buttonclicked, вы увидите, что теперь она назначена function(e), а не только function().