javascript - 数据表中的图标意外显示

Question

我的数据表仅在页面刷新之前以奇怪的方式显示图标时遇到问题。那是当我刷新它正常显示的页面时。

参见:

这是我针对该列的 innerHTML 代码:

tblTds[2].innerHTML = '<a href="#" onclick="deleteItem(' + "'" + aData[2] + "'" + ');"><i style="color:red" class="fa fa-times" title="Delete Item" id="item' + aData[2] + '"></i></a>';

我不知道发生了什么，有人见过这个或类似的东西吗？

Answer 1

我认为这就是为什么更好的做法是从 html 添加 html。这减少了犯错误的机会。

   
var addNewDeleteItem = function(tableCell, onClickEvent) {
  var deleteElement = document.getElementById("delete-icon-template");      
  deleteElement.removeAttribute("id");
  var html = deleteElement.outerHTML;
  deleteElement.onClick = onClickEvent;
  tableCell.innerHTML = html;
  
}

addNewDeleteItem(tblTds[2], deleteItem()); // aData[2] should be catch from that click event's raise point.

.hide {
  display: none;
}

<div class="hide">
  <a id="delete-icon-template" onClick="" class="fa fa-times" title="delete"></a>
</div>