скрыть строку таблицы, заполняемую динамически нажатием кнопки php-jquery

avatar
phrozeng
8 августа 2021 в 21:38
304
3
0

Добрый вечер, я динамически заполнил свою таблицу из базы данных. в конце каждой строки у меня есть кнопка. моя идея такова: когда я нажимаю кнопку, строка скрывается. Мне удается восстановить идентификатор каждой строки, но код jquery не работает, и моя консоль не возвращает никаких ошибок. не знаю где проблема? или даже если процесс правильный.

также самое позднее я надеюсь заменить кнопку флажком, но я не знаю, как применить мою идею с флажком

   <table name="table" class="table" border="1">
    <tbody>
        <?php
        include 'controller.php';
        $controller1 = new Controller();
        $res = $controller1->array();

        while ($donne = $res->fetch()) {
            ?>
            <tr id="<?php $donne['id'] ?>">
                <td> <?php echo $donne['operateur'] ?></td>
                <td> <?php echo $donne['machine'] ?></td>
                <td> <?php echo $donne['declaration'] ?></td>
                <td>
                    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method='post' style="display: inline;">
                        <input type='hidden' id='id' name='id' value="<?php echo $donne['id']; ?>" />
                        <input  type='submit' name='validate' id='validate' value='validate' />

                    </form>

                </td>
            </tr>
            <?php
        }
        ?>
</table>

а это мой код jQuery

 if (isset($_POST['id']) && !empty($_POST['id'])) {
        ?>
        <script>
            $(document).ready(function () {
                $("#validate").click(function () {
                    var i = $("#id").val();
                    var i = i.toString()
                    $("#" + i).hide();
                });
            });
        </script>

        <?php
    }
Источник
Twisty
8 августа 2021 в 22:49
0

Если это повторяется, у вас возникнет проблема с HTML, так как у вас будет несколько элементов #id.

Ответы (3)

avatar
phrozeng
9 августа 2021 в 10:24
0

я обнаружил свою ошибку. Я установил один и тот же идентификатор для каждой кнопки, это неправильно, поэтому я использую класс вместо идентификатора, таким образом я мог бы просто восстановить идентификатор и применить .hide()

<script type="text/javascript">
    $(".validate").click(function () {
        var num = $(this).parents("tr").find("td:eq(0)").text();
        alert(num);
       
    });
</script>

я также удаляю форму, потому что больше не нужно

avatar
Twisty
8 августа 2021 в 22:57
0

Рассмотрите следующее.

$(function() {
  $(".validate").click(function() {
    var i = $(this).closest("tr").attr("id");
    $("#" + i).hide();
    var url = "<?php echo $_SERVER['PHP_SELF']; ?>";
    $.post(url, {
      id: i,
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table name="table" class="table" border="1">
  <tbody>
    <tr id="row-1">
      <td>
        operateur 1
      </td>
      <td>
        machine 1
      </td>
      <td>
        declaration 1
      </td>
      <td>
        <button class="validate">Validate</button>
      </td>
    </tr>
    <tr id="row-2">
      <td>
        operateur 2
      </td>
      <td>
        machine 2
      </td>
      <td>
        declaration 2
      </td>
      <td>
        <button class="validate">Validate</button>
      </td>
    </tr>
    <tr id="row-3">
      <td>
        operateur 3
      </td>
      <td>
        machine 3
      </td>
      <td>
        declaration 3
      </td>
      <td>
        <button class="validate">Validate</button>
      </td>
    </tr>
</table>

Это применит обратный вызов к каждой кнопке. При нажатии кнопки строка скрывается, а идентификатор отправляется в ваш PHP-скрипт.

phrozeng
8 августа 2021 в 23:20
0

я заменяю свой скрипт этим и меняю класс моей кнопки на проверку, но все равно не работает. я могу поделиться здесь всем кодом, может быть, вы можете найти ошибку и большое спасибо, мистер @twisty, я также думаю, что, потому что вы даете для каждой строки идентификатор = "row-1 2....", но в моем случае таблица динамическая так ...

Twisty
9 августа 2021 в 01:45
0

@phrozeng все идентификаторы HTML должны быть уникальными. Если вы хотите использовать PasteBin или что-то подобное, чтобы поделиться своим текущим кодом, я могу посмотреть на него.

avatar
jofila tech
8 августа 2021 в 21:43
0

используйте JQuery, чтобы скрыть предпочтительную строку bi либо идентификатором, либо классом после динамической загрузки. это пример:

// Обозначает общее количество строк. переменная rowIdx = 0;

// Событие нажатия кнопки jQuery для добавления строки. $('#addBtn').on('щелчок', функция () {

// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
      <td class="row-index text-center">
            <p>Row ${rowIdx}</p></td>
       <td class="text-center">
        <button class="btn btn-danger remove" 
            type="button">Remove</button>
        </td>
       </tr>`);

});

phrozeng
8 августа 2021 в 22:56
0

извините, я не понимаю, как это решение может мне помочь, особенно я новичок в javascript. я пытаюсь использовать jquery, чтобы скрыть строку (я дал для каждой строки один и тот же идентификатор базы данных, которую я восстанавливаю в коде jQuery с помощью функции .hide(), но это не работает).