Как сгруппировать столбцы таблицы и повесть на них событие onclick?

Question

Как сгруппировать столбцы таблицы и повесть на них событие onclick?

Рейтинг: 0Ответов: 1Опубликовано: 31.07.2023

Есть таблица, которая заполняется из базы данных. Также в ней есть дополнительные столбы "изменить" и "удалить", которые выполняют соответствующее действия для каждой строчки таблицы (Пример на картинке ниже). Нужно сделать так, чтобы при нажатии на строчку с товаром (первые 3 столбца) открывалась отдельная страница с описанием этого товара, но при этом чтобы кнопки "изменить" и "удалить" оставались активными. Можно ли как то сгруппировать нужные первые 3 столбца и на них разом повесить событие onclick или можно только на каждый по отдельности?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>БАЗА</title>
</head>
<body>

<table class="table">
    <thead>
        <tr>
            <th>ПРОДУКТ</th>
            <th>НОМЕР</th>
            <th>ЦЕНА</th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <?php 
    $connect = mysqli_connect('localhost', '1111', '1111', 'base');
    $products = mysqli_query($connect, "SELECT * FROM `products`");
    $products = mysqli_fetch_all($products);
    
    foreach($products as $item)
    {
        ?>
            
            <tr>
                <td><?= $item[1] ?></td>
                <td><?= $item[2] ?></td>
                <td><?= $item[3] ?></td>

                <td onclick="document.location='change.php?id=<?= $item[0] ?>'">Изменить</div></a></td>
                <td onclick="document.location='delete.php?id=<?= $item[0] ?>'">Удалить</div></a></td>
            </tr>

        </tr>
        <?php
    }
    ?>      

</table>

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Можно ли как то сгруппировать нужные первые 3 столбца и на них разом повесить событие onclick

Можно вообще на весь tbody навесить click и далее анализировать на чем именно кликали... И совершать нужные действия.

document.querySelector('.tbl tbody').addEventListener('click', e => {
  const o = e.target.closest('td')
  if (!o) return
  const ot = o.closest('tr')
  const id = ot.dataset.id
  const a = [...ot.cells]
  if (a[a.length - 1] === o) {
    alert('Удалить ' + id)
    return
  }
  if (a[a.length - 2] === o) {
    alert('Изменить ' + id)
    return
  }
  alert(`Перейти в нужное место для "${id}"...`)
})

<table class="tbl">
  <thead>
    <tr>
      <th>ПРОДУКТ</th>
      <th>НОМЕР</th>
      <th>ЦЕНА</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr data-id='ИД1'>
      <td>11</td>
      <td>21</td>
      <td>31</td>

      <td>Изменить</div>
        </a>
      </td>
      <td>Удалить</div>
        </a>
      </td>
    </tr>
    <tr data-id='ИД2'>
      <td>12</td>
      <td>22</td>
      <td>32</td>

      <td>Изменить</div>
        </a>
      </td>
      <td>Удалить</div>
        </a>
      </td>
    </tr>
  </tbody>
</table>

Как сгруппировать столбцы таблицы и повесть на них событие onclick?

Ответы