用于编辑表格行的 Javascript

Question

我需要有关网站功能的帮助。我只是无法使脚本正常工作。 我有这个网站： http://imgur.com/oMy69yx 如您所见，每一行都有一个“编辑”按钮。这里的目标是当用户按下其中之一时，该行变得可编辑（主题名称除外）并且按钮变为“保存”。然后用户可以编辑他想要的所有内容并保存。当他单击“保存”时，我会通过 SQL 查询获得所有已更改和更新的字段。 PS：行数是未定义的，因为用户可以输入任意多的行。

所以我想在这样的脚本中：

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

但这行不通，因为 var button 是一个按钮数组，而 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);
}

另外请注意，我在buttonclicked 函数中处理e.target，而不是button，这样我们每次都能获得正确的按钮。

e 是 event object，包含有关 onclick 事件的信息。如果您查看buttonclicked 变量，您会发现它现在被分配了function(e) 而不仅仅是function()。