JavaScript onClick，通過函數和按鈕從表（使用PHP從數據庫填充）中獲取數據（id）

Question

我有一個文件，該文件通過PHP用數據庫中的數據填充表。 它像這樣填充它：

$SQL = "SELECT m.id, m.nombre, m.descripcion, m.carga_horaria, c.nombre AS  carrera_nombre FROM materias m JOIN carreras c ON (m.carrera_id = c.id)";
$resultado = $CONN->query($SQL);

//Populating the table
if($resultado->num_rows > 0){
while($row = $resultado->fetch_assoc()){
    echo "<tr>";  //row de comienzo
        echo "<td>{$row['nombre']}</td>";
        echo "<td>{$row['descripcion']}</td>";
        echo "<td>{$row['carga_horaria']} modulos</td>";
        echo "<td>{$row['carrera_nombre']}</td>";  //el alias de carrera.nombre

        //THIS PART IS THE ONE WITH THE ACTIONS
        echo '<td><div class="divActionsBtn"><button class="btn btn-primary" value="'.$row['id'].'">Edit</button> <button class="btn btn-danger" value="'.$row['id'].'" data-toggle="modal" data-target="#myModal" id="deleteSubj" onClick="deleteSubjects();">Delete</button><div></td>';
    echo "</tr>";
}
}else{
    echo "<tr><td>No data<td></tr>";
}

它具有兩個操作按鈕：“編輯”和“刪除”。 當其中任何一個被按下時，它將獲取該行的id值並對其相應的元素進行操作。 為了檢查功能，我只是試圖按一下該行的ID並將其打印在控制台中。 我正在嘗試在單獨的JavaScript文件中使用此功能：

function deleteSubjects(){

    var subjectId = document.getElementById("deleteSubj").value;
    console.log(subjectId);
}

如果執行此操作，則無論在哪個元素上按下“刪除按鈕”（因此，任何行都為1），我在控制台中只會得到“ 1”

如果我將其更改為：

function deleteSubjects(){

    var subjectId = this.value;
    console.log(subjectId);
}

或其他選擇：

function deleteSubjects(){

    var deleteButton = document.getElementById("deleteSubj");
    var subjectId = this.value;
    console.log(subjectId);
}

使用最后兩個選項，我在控制台中得到“未定義”。

我已經得到了一段示例代碼，它使用了jQuery，並替換了它的功能，我就能得到正確的id：

('#deleteSubj').on( "click", function() {
    var subjectId = $(this).val();
    console.log(subjectId);
});

但是我不想使用jQuery：/我的意思是，我已經用JavaScript完成了整個項目功能，而且我知道我要實現的目標也必須能夠使用普通JavaScript來完成。

Answer 1

您可以使用click事件獲取按鈕信息

function deleteSubjects(e){
     var subjectId = e.currentTarget.value;
     console.log(subjectId);
}

Answer 2

解決了！ 這是一個簡單的錯誤，我在找到該線程后已解決-> Javascript獲取元素值

因此，我的js函數最終如下所示：function deleteSubjects（button）{

var materiaId = parseInt(button.value);
console.log(materiaId);

}

然后，我在onClick事件的函數調用中添加了“ this”關鍵字。 附加：決定將值轉換為整數，以將其准備用於數據庫。