0

我有一个加载的基本 HTML 表。结构因上传的 CSV 文件的内容而异。表格列需要是可拖动的（为此我使用了一个名为 Dragtable 的插件）。然后我有添加行和列的方法。添加列方法如下所示：

function addCol(tblId) {
 var tblHeadObj = document.getElementById(tblId).tHead;
 for (var h=0; h < tblHeadObj.rows.length; h++) {
    var newTH = document.createElement('th');
    tblHeadObj.rows[h].appendChild(newTH);
    colCount = (tblHeadObj.rows[h].cells.length);
    newTH.innerHTML = 'Col ' + colCount;
 }

 var tblBodyObj = document.getElementById(tblId).tBodies[0];
 for (var i=0; i<tblBodyObj.rows.length; i++) {
    var newCell = tblBodyObj.rows[i].insertCell(-1);
    newCell.innerHTML = "*null*";
 }
}

问题是当我添加一个新列时，我不能再拖动该列将其放置在不同的位置。我还有一个表标题的 onclick 处理程序，它允许用户在单击第 th 元素时删除一列。这也不适用于新添加的列。基本上，所有事件侦听器都不会添加到新列上。

我尝试隐藏和显示表格和页面，但不起作用。我想我需要一种刷新表格的方法，但找不到有效的方法。

像这样的东西：

var table = document.getElementById("grid");
table.refresh ();

有没有办法做到这一点？还是我添加列的方式有问题，这可能是未附加事件侦听器的原因？

编辑

删除列方法如下：（使用适当的事件委托编辑）这解决了删除列方法的问题。我仍然无法拖动和排序新列

$("table").delegate("th:not(:first)", "click", function() {
   var index = this.cellIndex;
   $(this).closest('table').find('tr').each(function() {
     this.removeChild(this.cells[ index ]);
   });  
}

关于 Dragtable 列排序，我只是将可拖动类添加到我的表中。我不确定事件侦听器的外观：

<table id = "grid" class="draggable"></table>
4

1 回答 1

0

您应该为此使用事件委托。您应该做的是向表本身添加一个事件侦听器，该侦听器检查.target事件对象的属性以查看事件是否针对标题并采取适当的操作。

除了事件委托方法之外，您可以进行的另一个简单修复是在添加新行时简单地附加处理程序：

newTH.addEventListener("click", function(){
     //this should be your event listener
})

正如 j08691 所指出的，您可能错误地标记了 jQuery，所以我现在不添加任何 jQuery 代码

于 2012-12-14T17:43:55.233 回答