0

ロードされる基本的なHTMLテーブルがあります。構造は、アップロードされたCSVファイルの内容によって異なります。テーブルの列はドラッグ可能である必要があります（ドラッグテーブルと呼ばれるプラグインを使用します）。次に、行と列を追加するメソッドがあります。列の追加メソッドは次のようになります。

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 ]);
   });  
}

ドラッグテーブルの列の並べ替えに関しては、ドラッグ可能なクラスをテーブルに追加するだけです。イベントリスナーがどのように見えるかわかりません：

<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 に答える