jquery - 如何将已编辑的用户更改为使用 jquery 输入？

问题描述

我有一些问题。首先，我用 html/jquery 做了一个简单的项目。我有简单的注册表单和用户列表。

在人们签署我的网站后，我想编辑用户名、用户名等，只保留编辑部分。对不起我没用的英语。但是当你看到代码时，我相信你会明白的。

这是代码的。密码笔

var userList = [];

var config = {
    date: {
        day: "2-digit",
        year: "numeric",
        month: "long",
        hour: "numeric",
        minute: "2-digit"
    }
}

var generateGUID = () => {
    var s4 = () => {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

var generateRow = user => `<tr data-info='${JSON.stringify(user)}' >
        <td>
        ${user.name}
        </td>
        <td>
        ${user.surname}
        </td>
        <td>
        ${user.email}
        </td>
        <td>
        ${user.username}
        </td>
        <td>
        ${user.createDate.toLocaleDateString("tr", config.date)}
        </td>
        <td>
            <button data-user="${user.id}" class="del">Del</button>
            <button data-user="${user.id}" class="edit">Edit</button>
        </td>
    </tr>`;



$("#button").click(() => {
    let user = {
        name: $('#name').val(),
        surname: $('#surname').val(),
        email: $('#email').val(),
        username: $('#username').val(),
        createDate: new Date(),
        id: generateGUID()
    };

    userList.push(user);
    $('#name').val('');
    $('#surname').val('');
    $('#email').val('');
    $('#username').val('');
    $('#password').val('');
    let row = $(generateRow(user));

    $(row).find(".del").click(function () {
        if (window.confirm("Do you really want to delete?")) {
            $(row).remove();
        }
    });

    $(row).find(".edit").click(function () {
        $("#edit").show();
        $("#button").hide();
        let edit = $(this).closest('tr').data('info');
        $('#name').val(edit.name);
        $('#surname').val(edit.surname);
        $('#email').val(edit.email);
        $('#username').val(edit.username);
        $(this).attr("data-user");
        $(userList).filter("data-user");

        $('#edit').click(function () {
        });
    });



    $('tbody').append(row);

});

<html lang="tr">

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Bootstrap 4 Register Form</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <form class="form-horizontal" role="form" method="POST" action="/register">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <h2>Register New User</h2>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 field-label-responsive">
                    <label for="name">Name</label>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                            <div class="input-group-addon" style="width: 2.6rem">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" name="name" class="form-control" id="name" placeholder="John or Jane" required autofocus>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 field-label-responsive">
                    <label for="email">Surname</label>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                            <div class="input-group-addon" style="width: 2.6rem">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" name="surname" class="form-control" id="surname" placeholder="Doe" required autofocus>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 field-label-responsive">
                    <label for="email">Email</label>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                            <div class="input-group-addon" style="width: 2.6rem">
                                <i class="fa fa-at"></i>
                            </div>
                            <input type="email" name="email" class="form-control" id="email" placeholder="you@example.com" required autofocus>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 field-label-responsive">
                    <label for="password">Username</label>
                </div>
                <div class="col-md-6">
                    <div class="form-group has-danger">
                        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                            <div class="input-group-addon" style="width: 2.6rem">
                                <i class="fa fa-user-plus"></i>
                            </div>
                            <input type="text" name="password" class="form-control" id="username" placeholder="Username" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 field-label-responsive">
                    <label for="password">Password</label>
                </div>
                <div class="col-md-6">
                    <div class="form-group has-danger">
                        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                            <div class="input-group-addon" style="width: 2.6rem">
                                <i class="fa fa-key"></i>
                            </div>
                            <input type="password" name="password" class="form-control" id="password" placeholder="Password" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <button type="button" id="button" class="btn btn-success">
                        <i class="fa fa-user-plus"></i>Register</button>
                    <button type="button" style="display:none;" id="edit" class="btn btn-success">
                        Düzenle</button>
                </div>

            </div>
        </form>
    </div>
</body>

<table class="table">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Surname</th>
            <th scope="col">Email</th>
            <th scope="col">Username</th>
            <th scope="col">Register Date</th>
            <th scope="col">Edit</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script src="script.js"></script>

</html>

标签： jquery

jquery - 如何将已编辑的用户更改为使用 jquery 输入？

问题描述

解决方案

推荐阅读