Hi ruben00000,
In order to add the Edit and Delete icon on each row, you need to add that in the table row while defining the structure.
Then when you clone the row the edit and delete button will be cloned.
Refer below sample.
Model
public class Author
{
public int id { get; set; }
public string name { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public async Task<JsonResult> GetData()
{
List<Author> authorList = new List<Author>();
authorList.Add(new Author { id = 1, name = "John Hammond" });
authorList.Add(new Author { id = 2, name = "Mudassar Khan" });
return Json(authorList, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<table id="tblauthor" class="table table-vcenter card-table table_data">
<thead class="table-success" style="background:white;">
<tr>
<th style="font-size: 80%; font-weight: 700;">Id</th>
<th style="font-size: 80%; font-weight: 700;">Name</th>
<th style="font-size: 80%; font-weight: 700;">Action</th>
</tr>
</thead>
<tr>
<td id="Id"></td>
<td id="Name"></td>
<td>
<a href="javascript:void(0)" class="glyphicon glyphicon-pencil edit"></a>
<a href="javascript:void(0)" class="glyphicon glyphicon-trash delete"></a>
</td>
</tr>
</table>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: '/Home/GetData',
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (response) {
if (response.length > 0) {
var head = $("#tblauthor").find('thead').eq(0).clone();
var row = $("#tblauthor").find('tr').eq(1).clone();
$("#tblauthor").empty();
$("#tblauthor").append(head);
$.each(response, function (i, obj) {
$(row).find("#Id").text(obj.id);
$(row).find("#Name").text(obj.name == null ? '-' : obj.name);
$("#tblauthor").append(row);
row = $("#tblauthor").find('tr').eq(1).clone();
});
}
else {
var tbl = $("table#tblauthor > tr");
$(tbl).each(function (index, value) {
$(value).find('td').empty()
})
return null;
}
},
error: function (response) {
alert(response.responseText);
}
});
});
$("body").on("click", ".edit", function () {
alert("Edit button is clicked.");
});
$("body").on("click", ".delete", function () {
alert("Delete button is clicked.");
});
</script>
</body>
</html>
Screenshot
