Question 167350 in PHP Question posted in
Official manual can be found here.

Php – how do i access a specific element in js?

I want to display a menu for that clicked element when I click on a certain element.

enter image description here
enter image description here

to make it look like on screenshots. In the future, by clicking on the "edit" or "delete" span, it will edit or delete the data of the field selected by the user.

<?php
$checkProducts = mysqli_query($connect, "SELECT * FROM `products`");
while ($resCheckProduct = mysqli_fetch_assoc($checkProducts)) {
    $checkUnits = mysqli_query($connect, "SELECT * FROM `units` WHERE id_unit = {$resCheckProduct['unit']}");
    while ($resCheckUnits = mysqli_fetch_assoc($checkUnits)) {
?>

        <tr class="tr-content">
            <td><input type="checkbox" name="" id=""></td>
            <td><span class="icon-menu-span" data-id="<?= $resCheckProduct['id_product'] ?>"></span>
                <div class="table-div-menu-product" data-id="<?= $resCheckProduct['id_product'] ?>">
                    <span>edit</span>
                    <span>delete</span>
                </div>
            </td>
            <td><?= $resCheckProduct['name'] ?></td>
            <td><?= $resCheckProduct['description'] ?></td>
            <td><img class="tableProduct-img" src="<?= $resCheckProduct['image'] ?>" alt=""></td>
            <td><?= $resCheckProduct['available_balance'] ?></td>
            <td><?= $resCheckUnits['abbreviated'] ?></td>
            <td><?= $resCheckProduct['retail_price'] ?>₽</td>
            <td><?= $resCheckProduct['purchase_price'] ?>₽</td>
            <td><?= $resCheckProduct['date_of_creation'] ?></td>
            <td><?= $resCheckProduct['date_of_change'] ?></td>
        </tr>

<?php
    }
}
?>

var
    butOpenWindowMenu = document.getElementsByClassName('icon-menu-span')[butOpenWindowMenu.dataset.id],
    modalWindowMenu = document.getElementsByClassName('table-div-menu-product')[modalWindowMenu.dataset.id];

butOpenWindowMenu.addEventListener('click', function (e) {
    e.preventDefault();
    modalWindowMenu.style.display = 'block';
});

window.addEventListener('click', function (modal) {
    if (modal.target == modalWindowMenu) {
        modalWindowMenu.style.display = 'none';
    }
});
Tags:

2

Answers


  1. 0

    You can use querySelector and pass the css selector document.querySelector('icon-menu-span[data-id=*]')

    you can also grab the data-id from the clicked target and use that inside the css selector to open that element or use relative dom navigation to update the menu item.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

    Login or Signup to reply.
  2. 0

    I think you want to do something like this to open them:

    var butOpenWindowMenus = document.querySelectorAll('.icon-menu-span');

for (var butOpenWindowMenu of butOpenWindowMenus) {
  butOpenWindowMenu.addEventListener('click', function() {
    document.querySelector('.table-div-menu-product[data-id="'+this.dataset.id+'"]).style.display = 'block';
  })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search