Редактируемая таблица без использования плагинов jquery

Я хочу создать таблицу с редактируемым содержимым (используя кнопку «редактировать» в каждой строке) без использования Bootstrap или любого другого плагина. Я хочу использовать только HTML, PHP, AJAX, JavaScript. Возможна ли такая задача, и если да, может ли кто-нибудь опубликовать пример кода или пример?

Результаты SQL работают нормально.

$sql_query = "SELECT User.user_id,User.name,User.surname,User.username,User.password,Role.role_name FROM User INNER JOIN Role ON User.role_id = Role.role_id";
            $result = mysqli_query($conn, $sql_query);
            $role_name = 'role_name';
            while($rows = mysqli_fetch_array($result))
            {       echo "<tr>";
                    echo "<td> $rows[$user_id]</td>";
                    echo "<td> $rows[$name]</td>";
                    echo "<td> $rows[$surname]</td>";
                    echo "<td> $rows[$username]</td>";
                    echo "<td> $rows[$password]</td>";
                    echo "<td> $rows[$role_name]</td>"; 
                    ?>                  
                    <div id = "edit">
                            <td> <button type='button' id = "<?php $rows[$user_id];?>" onclick = "submit_id()"> Edit </button> </td>
                    </div>                
            <?php 
            }
            echo "</table>"; ?>

            <script>
                    function submit_id() {
                            var user_id = user_id.val();
                            $.ajax({
                                    url:'reedit.php',
                                    type: 'GET',
                            data: (user_id);
                    })
            }
            </script>

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

Да, это возможно, я сделал кучу разных таблиц, ваши ячейки td содержат обычный текст, верно?

— 23.05.2019 19:28

да это обычный текст

— 24.05.2019 17:39

javascript php mysql ajax

23.05.2019 19:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

466

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы можете использовать атрибут content-editable, чтобы сделать ваши ячейки доступными для редактирования

что-то типа:

var rows = document.querySelectorAll("tr");
row.foreach(function() {
  this.addEventListener('click', function() {
    this.setAttribute('contenteditable','contenteditable');
  });
});

Вы захотите поместить прослушиватель кликов на кнопку вместо строки

23.05.2019 19:32

Ответ принят как подходящий

Я видел, что у вас есть хотя бы jQuery..

Я думаю, что это поможет вам МНОГО:

<?php
    $sql_query = "SELECT User.user_id,User.name,User.surname,User.username,User.password,Role.role_name FROM User INNER JOIN Role ON User.role_id = Role.role_id";
    $result = mysqli_query($conn, $sql_query);
    if (!$result) {
        die(mysqli_error($conn));
    }
    $table_html = "<table id=\"usersTable\">";
    while($rows = mysqli_fetch_array($result)) {       
        $table_html .= "<tr>";
        $table_html .= "<td>" . $rows["user_id"] . "</td>";
        $table_html .= "<td>" . $rows["name"] . "</td>";
        $table_html .= "<td>" . $rows["surname"] . "</td>";
        $table_html .= "<td>" . $rows["username"] . "</td>";
        $table_html .= "<td>" . $rows["password"] . "</td>";
        $table_html .= "<td>" . $rows["role_name"] . "</td>";        
        $table_html .= "<td><button type=\"button\" class=\"editBnt\">Edit</button></td>";
        $table_html .= "</tr>";
    }
    $table_html .= "</table>";
    echo $table_html;
?>

<script>
    $(function() {
        $("#usersTable").on("dblclick", "td td:not(:first-child) td:not(:last-child)", function() {
            $(this).html("<input type=\"text\" class=\"form-control dynamicInput\" value=\""+$(this).text()+"\"></input>").children("input").focus();
            $(this).on("change blur", "input.dynamicInput", function() {
                $(this).parent("td").text($(this).val());
            });
        });

        $("#usersTable").on("click", "button.editBnt", function() {
            var row = $(this).parent().parent(),
            user_data = {
                user_id: row[0].cells[0].innerText,
                name: row[0].cells[1].innerText,
                surname: row[0].cells[2].innerText,
                username: row[0].cells[3].innerText,
                password: row[0].cells[4].innerText,
                role_name: row[0].cells[5].innerText
            };

            alert("You can now save the data or do what ever you want here.. check your console.");
            console.info(user_data);
        });
    });
</script>

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

— 24.05.2019 17:41

Вы можете просто использовать $.post для отправки на php и сохранить их в базе данных.

— 03.06.2019 19:10

23.05.2019 19:55