[英]How to add a div dynamically to a td tag of a datatable using JavaScript
I want to add a div to td tag of a datatable. 我想将div添加到数据表的td标签中。 Here is my HTML code:
这是我的HTML代码:
table = $("#workLocation-table").DataTable({
data: mainArray,
"columnDefs": [
{ className: "details-control" , "targets": [0]},
{
"order": [[1, 'asc']]
},
{
"targets": -1,
"width": "10%",
"data": null,
"defaultContent": '<div class="edit-wrapper"><span class="icn"><i class="fa fa-pencil-square-o" aria-hidden="true" id="edit"></i><i class="fa fa-trash-o" aria-hidden="true" id="delete"></i></span></div>'
}]
});
I want to add a div into targets 2 and provide "over-length" class to that div. 我想将div添加到目标2中并为该div提供“超长”类。
Try this: 尝试这个:
var target = document.getElementById("id_of_the_element_inside_which_you_want_to_insert_div");
var d = document.createElement("div"); // Create div dynamically
d.setAttribute("class","over-length"); // Add "over-length" class to the dynamically created div
target.appendChild(d); // Now insert div inside target element
table = $("#workLocation-table").DataTable({
data: mainArray,
"columnDefs": [
{ className: "details-control" , "targets": [0]},
{
"order": [[1, 'asc']]
},
{
"targets": 2,
render : function(data, type, row) {
return '<div class="over-length">'+data+'</div>'
}
},
{
"targets": -1,
"width": "10%",
"data": null,
"defaultContent": '<div class="edit-wrapper"><span class="icn"><i class="fa fa-pencil-square-o" aria-hidden="true" id="edit"></i><i class="fa fa-trash-o" aria-hidden="true" id="delete"></i></span></div>'
}]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.