通过按钮php通过id从表中删除元素

Question

I have this table:

Here's code of this page:

<?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>

I parse my own API and then fill it into a table. Now when I click on any button DELETE, every time I have the same alert "12". I understand why its happen, but i can't figure out how make it correct. How do I associate each button with the corresponding cell ID? Sorry for language mistakes and thanks for helping.

Answer 1

The problem is that you can only have only one id in a page, but as you are giving that button an id inside a loop different elements are getting same id.

To fix this, you can always use class. But your according to your approach use something like this.

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

And in javascript

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

I hope this helps you.

Cheers :)

Answer 2

I advise you to pass current ID as a function parameter:

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

And function signature will be:

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

Also I delete id attribute from button as it's not required. And if you want to use same id for multiple elements in future - don't , as id must be unique on html-page.

Answer 3

请根据图片更改代码