用于编辑表格行的 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()。