Javascript 编辑 table 行

Question

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

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

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

但这行不通，因为 var button 是一个按钮数组，而 addEventListener 将无法使用... 我能做些什么来解决这个问题？

这是生成 table 的 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 是保存有关 onclick 事件信息的 event object。如果您查看 buttonclicked 变量，您会看到它现在被分配 function(e) 而不是 function().

Javascript 编辑 table 行

Javascript to edit table rows

javascript

mysql

edit