如何从表行中获取数据

Question

我试着创建一个crud应用程序，并停留在数据更新部分，我不知道如何从表的一行中获取数据值​​，并在要编辑的输入表单中将它们打开。这是我的密码

@model Web.Cifo.Cms.Models.AccountModel

<h2>Account</h2>
<hr />

<div class="row m-1">
    <div class="col-md-push-4 mt-2 mr-5 ml-4">
        <form method="post" asp-controller="home" asp-action="account">
            <label for="uname">Username</label>
            <input type="text" id="uname" asp-for="username" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="pass">Password</label>
            <input type="password" asp-for="password" required="required" id="pass" class="form-control" style="width:250px">

            <label class="mt-2" for="name">Name</label>
            <input type="text" id="name" asp-for="nama" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="contact">Phone Number</label>
            <input type="number" id="contact" asp-for="hp" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="email">Email</label>
            <input type="email" id="email" asp-for="email" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="url">Profil Image Url</label>
            <input type="text" id="url" asp-for="profil_image" required="required" class="form-control" style="width:250px">

            <div class="row mt-2 pl-3">
                <button type="submit" class="btn btn-dark">Add</button>
            </div>
        </form>


    </div>
    <div class="col-md-pull-8 m-1">
        <h6>Select Table For Edit Or Delete</h6>
        <!-- Editable table -->
        <div class="card" style="overflow-x:scroll; overflow-y:scroll; height:50rem; width:70rem">
            <h3 class="card-header text-center font-weight-bold text-uppercase py-4">Account</h3>
            <div class="card-body mr-2">
                <div id="table" class="table-editable">
                    <table class="table table-bordered table-responsive-md table-striped text-center" style="table-layout:fixed">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:15rem">Action</th>
                                <th class="text-center" style="width:10rem">User Name</th>
                                <th class="text-center" style="width:10rem">Password</th>
                                <th class="text-center" style="width:10rem">Name</th>
                                <th class="text-center" style="width:15rem">Phone</th>
                                <th class="text-center" style="width:10rem">Email</th>
                                <th class="text-center" style="width:15rem">Profile Image Url</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var acc in ViewBag.account)
                            {
                                <tr>
                                    <td>
                                        <a class="btn btn-danger btn-rounded btn-sm my-0" asp-controller="home" asp-action="deleteaccount" asp-route-id="@acc.username" onclick="return confirm ('Are You Sure ?')">Remove</a>
                                        <a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0">Edit</a>

                                    </td>
                                    <td class="pt-3-half">@acc.username</td>
                                    <td class="pt-3-half">@acc.password</td>
                                    <td class="pt-3-half">@acc.nama</td>
                                    <td class="pt-3-half">@acc.hp</td>
                                    <td class="pt-3-half">@acc.email</td>
                                    <td class="pt-3-half">@acc.profil_image</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- Default input with help text-->
    </div>

</div>

所以，我想要的是，当我按下编辑按钮

<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0">Edit</a>

这里可以显示来自选定行的数据。

label for="uname">Username</label>
            <input type="text" id="uname" asp-for="username" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="pass">Password</label>
            <input type="password" asp-for="password" required="required" id="pass" class="form-control" style="width:250px">

            <label class="mt-2" for="name">Name</label>
            <input type="text" id="name" asp-for="nama" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="contact">Phone Number</label>
            <input type="number" id="contact" asp-for="hp" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="email">Email</label>
            <input type="email" id="email" asp-for="email" required="required" class="form-control" style="width:250px">

            <label class="mt-2" for="url">Profil Image Url</label>
            <input type="text" id="url" asp-for="profil_image" required="required" class="form-control" style="width:250px">

我对此完全陌生，请以一种很容易理解的方式解释。谢谢

Answer 1

请参考下面的代码片段，以便使用选定的行数据动态填充标记。

Html代码

<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0" onclick="return edit_func(this);">Edit</a>

JavaScript代码

<script>
    //pass current row to function
    function edit_func(row) {
        //console.log($($(row).parent().siblings()[0]).text());

        //get expected data from selected row
        var username = $($(row).parent().siblings()[0]).text();
        var password = $($(row).parent().siblings()[1]).text();
        var nama = $($(row).parent().siblings()[2]).text();
        var hp = $($(row).parent().siblings()[3]).text();
        var email = $($(row).parent().siblings()[4]).text();
        var profil_image = $($(row).parent().siblings()[5]).text();

        //populate input(s) with selected row data

        $("#uname").val(username);
        $("#pass").val(password);
        $("#name").val(nama);
        $("#contact").val(hp);
        $("#email").val(email);
        $("#url").val(profil_image);


        return false;
    }
</script>

考虑中的行动

public IActionResult Account(AccountModel account)
{
    //code logic here
    //insert new record or update the existing one
    //...

    return View(model);
}