通過按鈕php通過id從表中刪除元素

Question

我有這張桌子：

這是此頁面的代碼：

<?php 
include('footer.php');
include('../models/fetchQuotes.php');
$content = file_get_contents("http://test/MY_API/getAllTopics");
$arrayId = array();
$arrayName = array();
$arrayImg = array();
foreach (json_decode($content, true) as $eventrType => $events) {
    array_push($arrayId, $events[id]);
    array_push($arrayName, $events[name]);
    array_push($arrayImg, $events[img]);
}
?>
<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Img</th>
                <th>Option 1</th>
            </tr>       
        </thead>
        <tbody>
            <?php for ($i=0;$i<count($arrayId);$i++) { ?> 
            <tr>
                <td><?php echo ($arrayId[$i])." "; ?></td>
                <td><?php echo ($arrayName[$i])." "; ?></td>
                <td><img src="<?php echo ($arrayImg[$i])." ";?>" alt="" width="75", heigth="75"></td>
                <td> <button class="btn btn-danger" id="deleteById" value=<?= ($arrayId[$i]); ?> onclick="myFunction()">DELETE</button>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Ошибка</h4>
                                </div>
                                <div class="modal-body" id ="modal-body">

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                </div>
                            </div>
                        </div>
                    </div></td>
                </tr><?php } ?> 
            </tbody>
        </table>
    </div>
    <script> 
    function myFunction(){
       var deleteById = document.getElementById('deleteById').value;
       alert(deleteById);
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

我解析自己的API，然后將其填充到表中。 現在，當我單擊任何按鈕DELETE時，每次我都有相同的警報“ 12”。 我知道為什么會發生，但是我不知道該怎么做。 如何將每個按鈕與相應的單元格ID關聯？ 抱歉語言錯誤，感謝您的幫助。

Answer 1

問題在於，頁面中只能有一個id，但是當您在循環中為該按鈕指定一個id時，不同的元素將獲得相同的id。

要解決此問題，您可以隨時使用class。 但是您根據自己的方法使用類似這樣的東西。

    <button class="btn btn-danger" onclick="myFunction(<?= ($arrayId[$i]); ?>)">DELETE</button>

並且在javascript中

    function myFunction(id){
        alert(id);
    }

我希望這可以幫助你。

干杯:)

Answer 2

我建議您傳遞當前ID作為函數參數：

<button class="btn btn-danger" value=<?= ($arrayId[$i]); ?> onclick="myFunction(<?= ($arrayId[$i]); ?>)">DELETE</button>

函數簽名將是：

function myFunction(idToDelete){
   alert(idToDelete);
}

我也從button刪除id屬性，因為它不是必需的。 而且，如果您以后希望對多個元素使用相同的ID， 請不要使用 ，因為ID在html頁上必須是唯一的 。

Answer 3

請根據圖片更改代碼