Question

我想创建一个具有可编辑内容的表（使用每行上的“编辑”按钮），而不使用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>

我想要每个编辑按钮，仅更改其对齐的行。

Answer 1

您可以使用content-editable属性使单元格可编辑

类似：

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

您将希望将点击侦听器放在按钮上而不是行上

Answer 2

我看到您至少有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.log(user_data);
        });
    });
</script>

不使用jQuery插件的可编辑表

2 个答案: