Question

我有一个加载的基本HTML表。结构根据并上传CSV文件的内容而有所不同。表列需要是可拖动的（我使用一个名为Dragtable的插件）。然后我有方法来添加行和列。 add column方法如下所示：

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列排序，我只是将draggable类添加到我的表中。我不确定事件监听器的外观：

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

Answer 1

您应该为此使用事件委派。你应该做的是向表本身添加一个事件监听器，它监视事件对象的.target属性，以查看事件是否以标题为目标并采取相应的操作。

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

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

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

事件侦听器不适用于新添加的表列

1 个答案: