how to get data from one of the table rows - html

Question

I tried to make a crud application, and stuck in the data update section, I don't know how to get data values ​​from one row of the table and bring them up in the input form to be edited.
This is my code
#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>
So, what I want is, when I press this edit button
<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0">Edit</a>
data from the selected row can be displayed here.
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">
I am totally new to this, please explain in a way that is easy to understand. thank you

Answer 1

Please refer to the following code snippet to dynamically populate tags with selected row data.
Html code
<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0" onclick="return edit_func(this);">Edit</a>
JavaScript code
<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>
In account action
public IActionResult Account(AccountModel account)
{
//code logic here
//insert new record or update the existing one
//...
return View(model);
}