0

私のページの 1 つで、このリンクから編集可能な html テーブルの例を使用しています: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425 。テーブル内のセルをクリックすると、テキスト ボックスに変わります。

ただし、ページのレイアウトを変更する必要があり、上記のサンプルを別の html テーブル (ネスト) 内に配置する必要がありました。

ここで問題は、セルをクリックすると、データが含まれている子テーブルを識別せず、クリックしたいのですが、親テーブルのセル (この場合は親テーブル) をクリックして保持することです。 2 つの異なるテーブル。

だから、私があなたに助けてほしいのは：

  1. クリックされたときに子テーブルのセルを識別するメソッドを取得します

または

  1. 何らかの方法で、ページ上の 2 つのテーブルを並べて並べて配置します。現在、親テーブルを使用して、他の 2 つのテーブルを並べて配置しています。

2 番目のオプションの方が実現しやすい場合は、あまり変更する必要はありません。

助言がありますか？

4

1 に答える 1

0

ページ上の要素をレイアウトするために親テーブル要素を使用している場合、テーブル要素はデータを集計するためのものであるため、これは非推奨の非セマンティック プラクティスであることを知っておいてください。float規則である CSS プロパティを使用する必要があります。CSS Floats 101 · An A List Apart Articleおよびw3schools.comを参照してください。

その親テーブルをリファクタリングすると、問題が解決するはずです。tdそれ以外の場合は、JavaScript でセレクターを変更し、編集可能な要素をクラス (例: )に割り当てることで修正できます。edittable-cellイベント リスナーを他のテーブルのtd要素に不必要に割り当てたり、他の場所で望ましくない動作を引き起こしたりすることはありません。

JavaScript

// Instead of the 'td' selector
$("td").dblclick(function() {
  // .. your code here
});

// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
  // .. your code here
});

データのテーブルを意味的にネストしている場合、および/またはこの問題がまだある場合は、イベントが親要素にバブルアップしないようにしてみてください。

JavaScript

$(".edittable-cell").dblclick(function(event) {
  event.stopPropagation();
  // .. your code here
});
于 2013-08-25T14:13:08.660 に答える