[英]Append button to a table row dynamically using jquery
I have an array of JavaScript JSON objects which is being parsed from a JSON formatted-string. 我有一个JavaScript JSON对象数组,它们是从JSON格式化字符串中解析的。 Now what I'm doing is that I'm looping through the array and append the data to a table within the page.
现在我正在做的是我循环遍历数组并将数据附加到页面内的表中。
$.each(objArr, function(key, value) {
var tr = $("<tr />");
$.each(value, function(k, v) {
tr.append($("<td />", {
html: v
}));
$("#dataTable").append(tr);
})
})
The code works perfectly and the table is getting populated successfully 代码工作正常,表格已成功填充
But what I'm looking for is that, I want to add a delete button at the end of the row, by which the user will delete the row, and it also important to handle the click event in order to perform the required action 但我正在寻找的是,我想在行的末尾添加一个删除按钮 ,用户将删除该行,并且处理click事件以执行所需的操作也很重要
I've done this in another way, but it is not that efficient, I want to use the code above to accomplish that as it is more efficient: 我以另一种方式完成了这项工作,但效率不高,我想使用上面的代码来实现它,因为它更有效:
for (var i = 0; i < objArr.length; i++) {
var tr = "<tr>";
var td1 = "<td>" + objArr[i]["empID"] + "</td>";
var td2 = "<td>" + objArr[i]["fname"] + "</td>";
var td3 = "<td>" + objArr[i]["lname"] + "</td>";
var td4 = "<td>" + objArr[i]["phone"] + "</td>";
var td5 = "<td>" + objArr[i]["address"] + "</td>";
var td6 = "<td >" + objArr[i]["deptID"] + "</td>";
var td7 = "<td>" + objArr[i]["email"] + "</td>";
var td8 = "<td>" + '<button id="' + objArr[i]["empID"] + '" value="' + objArr[
i]["empID"] + '" onclick="onClickDelete(' + objArr[i]["empID"] +
')">Delete</button>' + "</td></tr>";
$("#dataTable").append(tr + td1 + td2 + td3 + td4 + td5 + td6 + td7 + td8);
}
Any suggestions please? 有什么建议吗?
Try something like this: 尝试这样的事情:
$.each(objArr, function (key, value) {
var tr = $("<tr />");
$.each(value, function (k, v) {
tr.append($("<td />", { html: v }));
tr.append("<button class='remove' />");
$("#dataTable").append(tr);
})
})
This shall append the button at the end of the tr with class remove. 这将在tr的末尾添加按钮并删除类。
Try this, I've include event handler for the each buttons inside the table. 试试这个,我为表格中的每个按钮都包含了事件处理程序。
CHANGES: 变化:
Note: I am using, fadeOut
method for fading purposes only. 注意: 我正在使用
fadeOut
方法仅用于淡入淡出。 So you can see the changes. 所以你可以看到变化。 You can change the script as your need.
您可以根据需要更改脚本。
EXPLAINS : 解释:
var cRow = $(this).parents('tr');
on this line we have $(this)
which mean we've select the button object that you've clicked, and search the parent with tag-name tr
. $(this)
这意味着我们选择了你点击的按钮对象,并用tag-name tr
搜索父对象。 We need to do this because we need to take control of all data inside the tr
object. tr
对象内的所有数据。 var cId = $('td:nth-child(2)', cRow).text();
has mean search second td
object wich located on cRow
object. cRow
对象上的平均搜索第二个td
对象。 And take the text from the selected td
. td
获取文本。 JQUERY REFFERENCES : JQUERY REFFERENCES:
$(document).ready(function() { var jsonData = [ {id: 'A01', name: 'Fadhly'}, {id: 'A02', name: 'Permata'}, {id: 'A03', name: 'Haura'}, {id: 'A04', name: 'Aira'} ]; $.each(jsonData, function(key, val) { var tr = '<tr>'; tr += '<td>' + (key + 1) + '</td>'; tr += '<td>' + val.id + '</td>'; tr += '<td>' + val.name + '</td>'; tr += '<td><button class="delete" data-key="'+ (key + 1) +'">Delete</button></td>'; tr += '</tr>'; $('tbody').append(tr); }); $('button.delete').on('click', function() { var cRow = $(this).parents('tr'); var cId = $('td:nth-child(2)', cRow).text(); var intKey = $(this).data('key'); cRow.fadeOut('slow', function() { doDelete(cId, intKey); }); }); function doDelete(param1, param2) { alert('Data with\\n\\nID: [' + param1 + ']\\nKey: [' + param2 + ']\\n\\nRemoved.'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" width="100%"> <thead> <tr> <th>#</th> <th>Id</th> <th>Name</th> <th>Action</th> </tr> </thead> <tbody> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.