Блог

Главная - Вопросы по программированию - динамический дескриптор нажатия кнопки в динамической таблице

динамический дескриптор нажатия кнопки в динамической таблице

#javascript #php #html

#javascript #php #HTML

Вопрос:

У меня есть страница с несколькими вкладками. При каждом нажатии на вкладку мой скрипт запускает php страницу, которая возвращает таблицу с результатами. Затем эта страница возвращается в JS скрипт и вставляется в HTML-страницу.

Вот мой php скрипт:

 <?php
require_once(__DIR__ . '/../../db/db_handler.php');
require_once(__DIR__ . '/../../util/util.php');

$table = json_decode(file_get_contents('php://input'), true)['id'];
?>

<html>
<table class="table table-bordered table-sm">
    <thead class="thead-dark">
    <tr>
        <th style="width: 2%" scope="col">#</th>
        <th style="width: 15%" scope="col">Street</th>
        <th style="width: 10%" scope="col">Phone</th>
        <th style="width: 10%" scope="col">Date</th>
        <th style="width: 15%" scope="col">Price</th>
        <th style="width: 38%" scope="col">Comment</th>
        <th style="width: 10%" scope="col">Operator</th>
        <th style="width: 10%" scope="col">Worker</th>
    </tr>
    </thead>

    <tbody>

    <?php
    $stmt = $connection->prepare("SELECT * FROM `" . $table . "` ORDER BY `date` ASC");
    $stmt->execute();
    $result = $stmt->get_result();



    while ($row = $result->fetch_array()) {
        $tr_id = $table . $row['id'];

        echo '<tr>';
        echo '<th class="align-middle" scope="row">' . $row['id'] . '</th>';
        echo '<td class="align-middle">' . $row['street'] . '</td>';
        echo '<td class="align-middle">' . $row['phone'] . '</td>';
        echo '<td class="align-middle">' . format_date($row['date']) . '</td>';
        echo '<td class="align-middle">' . $row['price'] . '</td>';
        echo '<td class="align-middle">' . $row['comment'] . '</td>';
        echo '<td class="align-middle">' . $row['operator'] . '</td>';

        if (!isset($row['worker'])) {
            echo '<td>' . '<button type="button" class="btn btn-primary btn-sm">Accept</button>' . '</td>';
        } else {
            echo '<td>' . $row['worker'] . '</td>';
        }

        echo '</tr>';
    }
    ?>

    </tbody>
</table>
</html>

И вот моя страница с Tabs :

 <div class="tab-pane show" id="dr" role="tabpanel" aria-labelledby="city-dr">
 <ul class="nav nav-pills justify-content-center" id="tab-city" role="tablist">
  <li class="nav-item">
   <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="city-dr" data-toggle="tab" href="#dr" role="tab" aria-controls="dr" aria-selected="true">City 1</a>
  </li>

  <li class="nav-item">
   <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="city-bor" data-toggle="tab" href="#bor" role="tab" aria-controls="bor" aria-selected="false">City 2</a>
  </li>
 </ul>

 <div class="tab-content" id="city-content">
  <div class="tab-pane show" id="dr" role="tabpanel" aria-labelledby="city-dr">
   <ul class="nav nav-pills justify-content-center m-2" id="tab-table" role="tablist">
    <li class="nav-item">
     <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_dr_repair ?>" data-toggle="tab" href="#dr-repair-content" role="tab" aria-controls="dr-repair-content" aria-selected="false">Repair</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_dr_fttb_pull_in ?>" data-toggle="tab" href="#dr-fttb-pull-in-content" role="tab" aria-controls="dr-fttb-pull-in-content" aria-selected="false">FTTB Pull In</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_dr_fttb_weld ?>" data-toggle="tab" href="#dr-fttb-weld-content" role="tab" aria-controls="dr-fttb-weld-content" aria-selected="false">FTTB Weld</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_dr_ftth ?>" data-toggle="tab" href="#dr-ftth-content" role="tab" aria-controls="dr-ftth-content" aria-selected="false">FTTH</a>
    </li>
   </ul>
    
   <div class="tab-content" id="dr-table-content">
    <div class="tab-pane show active" id="dr-repair-content" role="tabpanel" aria-labelledby="city-dr"></div>
    <div class="tab-pane show active" id="dr-fttb-pull-in-content" role="tabpanel" aria-labelledby="city-dr"></div>
    <div class="tab-pane show active" id="dr-fttb-weld-content" role="tabpanel" aria-labelledby="city-dr"></div>
    <div class="tab-pane show active" id="dr-ftth-content" role="tabpanel" aria-labelledby="city-dr"></div>
   </div>
 </div>
    
 <div class="tab-pane show" id="bor" role="tabpanel" aria-labelledby="city-bor">
  <ul class="nav nav-pills justify-content-center m-2" id="tab-table" role="tablist">
   <li class="nav-item">
    <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_bor_repair ?>" data-toggle="tab" href="#bor-repair-content" role="tab" aria-controls="bor-repair-content" aria-selected="false">Repair</a>
   </li>
    <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_bor_fttb_pull_in ?>" data-toggle="tab" href="#bor-fttb-pull-in-content" role="tab" aria-controls="bor-fttb-pull-in-content" aria-selected="false">FTTB Pull In</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_bor_fttb_weld ?>" data-toggle="tab" href="#bor-fttb-weld-content" role="tab" aria-controls="bor-fttb-weld-content" aria-selected="false">FTTB Weld</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" style="font-size: x-large; text-transform: uppercase" id="<?php echo Tables::$table_bor_ftth ?>" data-toggle="tab" href="#bor-ftth-content" role="tab" aria-controls="bor-ftth-content" aria-selected="false">FTTH</a>
   </li>
  </ul>
    
  <div class="tab-content" id="bor-table-content">
   <div class="tab-pane show active" id="bor-repair-content" role="tabpanel" aria-labelledby="city-bor"></div>
   <div class="tab-pane show active" id="bor-fttb-pull-in-content" role="tabpanel" aria-labelledby="city-bor"></div>
   <div class="tab-pane show active" id="bor-fttb-weld-content" role="tabpanel" aria-labelledby="city-bor"></div>
   <div class="tab-pane show active" id="bor-ftth-content" role="tabpanel" aria-labelledby="city-bor"></div>
  </div>
 </div>
</div>

И вот мой JS-скрипт, который я использую для обработки кликов по вкладкам:

 $('#tab-table a').on('click', async function (e) {
        let data = {
            id: e.currentTarget.id
        };

        let response = await fetch('/main/repository/fetch_tasks_table.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: JSON.stringify(data)
        });

        document.getElementById(e.currentTarget.href.split('#').pop()).innerHTML = await response.text()
    });

Как вы можете видеть, в моей php части, где таблица повторяется, у меня в определенных случаях отображается кнопка.

Что я хочу сделать:

  • (плохое решение) заставить эту кнопку выполнить определенный php-скрипт, а затем перезагрузить всю страницу
  • (гораздо лучшее решение) заставьте эту кнопку изменить цвет row таблицы, на которую она была нажата, кнопка make исчезнет, на ее месте мы отобразим некоторый текст и внесем некоторые изменения в базу данных MySQL, выполнив некоторый php-скрипт с помощью fetch() или любым другим способом.

Пожалуйста, помогите мне разобраться в этом

Редактировать: мой мыслительный процесс и где я застрял.

Итак, если мы будем следовать процессу мышления, much better solution мы столкнемся со следующими проблемами:

  • Нам нужно изменить цвет того row места, где была нажата кнопка. Как функция JS должна узнать, что row это было? Кроме того, как функция JS узнает row , какой table из них был нажат?
  • Нам нужно скрыть кнопку и показать текст вместо кнопки. Как мне получить доступ к родительскому элементу, в который button вложен ( <td> тег), чтобы вставить в него некоторый текст, когда кнопка скрыта?

Комментарии:

1. Ну, вы в значительной степени поняли это (much better solution) . С какой именно проблемой вы столкнулись?

2. @El_Vanja Я отредактировал свой пост и добавил некоторую информацию внизу поста; Дубликат: Хорошо, итак, если мы будем следовать процессу мышления, much better solution мы столкнемся со следующими проблемами: — Нам нужно изменить цвет того row места, где была нажата кнопка. Как функция JS должна узнать, что row это было? Кроме того, как функция JS узнает row , какой table из них был нажат? — Нам нужно скрыть кнопку и показать текст вместо кнопки. Как мне получить доступ к родительскому элементу, в который button вложен ( <td> тег), чтобы вставить в него некоторый текст, когда кнопка скрыта?

3. Вы только что указали себе правильное направление. Если вы выполните поиск «получить родительский элемент элемента», вы попадете на страницу родительского элемента MDN. Вот как вы решаете, какая строка также — вы берете нажатую кнопку и находите ее родительскую.

4. вау, это было так просто, и я был так близок

5. @El_Vanja Большое вам спасибо! Я получил это отсюда

Метки: