不使用 jquery 插件的可编辑表答案

【问题标题】：Editable table without using jquery plugins不使用 jquery 插件的可编辑表
【发布时间】：2019-05-23 17:23:36
【问题描述】：

我想创建一个包含可编辑内容的表格（在每一行上使用“编辑”按钮），而不使用 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 单元格包含纯文本对吗？
是的，它是纯文本

标签： javascript php mysql ajax

【解决方案1】：

我看到你至少有 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>

【讨论】：

谢谢，这确实帮了很多忙。但即使我设法正确显示表格的内容，我不需要会话变量来通过另一个我将编辑所述用户的 php 文件吗？
您可以简单地使用 $.post 发送到 php 并将它们保存在数据库中。

【解决方案2】：

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

类似：

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

您需要将点击监听器放在按钮上而不是行上

【讨论】：