2

私はちょうどJQueryを学んでいます。私は次のことで立ち往生しています。

HTML テーブルがあります (PHP によって作成され、MYSQL クエリの結果を表示します)。

テーブルの最初の列にはドロップダウン メニューがあり、ユーザーはセルの値を変更したり、データベースを更新したりできます。私はそれを機能させるために.toggle、.postを使用しています。私の問題は、最初の行のみが機能することです。これは、重複している ID をターゲットにしているためだと思います。

それで、誰かが私を正しいテクニックに向けることができますか. 最大の問題は、尋ねるべき正しい質問を知らないことです....

行ごとに動的に一意の ID を作成する必要がありますか? しかし、もしそうなら、どうすればそれらを渡すことができますか、そうでなければ JQuery を取得して各行をターゲットにし、それがユーザーによって選択されたコンテンツになりますか?

ありがとう

--

4

3 に答える 3

2

単純にクラスを使用する方がよいでしょう。に置き換えid="てclass="から、ID ではなくクリックされた行に基づいてターゲットを設定します。

var theRow = $(this).closest("tr.myclass");
theRow.doSomething();
于 2013-03-18T14:50:31.690 に答える
2

IDの観点から見ないでください。木の視点から見てください。DOM ツリーのすべてのノードは、親、兄弟、子など、自分がどこにいるかを認識しています。行で何かが発生した場合、クリックされたものの場所を使用して、現在の「場所」を特定し、必要な関連データを取得します。

例えば

<tr>
   <td>Row 1</td>
   <td><button click="showRowNumber(this);">click</button></td>
</tr>
<tr>
   <td>Row 2</td>
   <td><button click="showRowNumber(this);">click</button></td>
</tr>
<script type="text/javascript">
function showRowNumber(el) {
   alert($(el).prev().text());  // outputs "Row 1" or "Row 2"
}
</script>

ID はありません。ツリー操作コードだけです。

于 2013-03-18T14:54:52.990 に答える
0

ケビンが言ったように、IDの代わりにクラスを使用する必要があります。

この場合、クラス イベント ハンドラー内で、次のように、クリックされた要素を具体的に参照するようclickに使用します。this

$('.toggler').click(function(){

   $(this).append('clicked element id: '+this.id); //will show the unique id for the toggled element
    //$.post(); will want to put your $.post inside to also make use of "this"
});

学習を助けるためにbyTagName、この場合は表のセル ( td)でこれを行うこともできます。

$('td').click(function(){

   $(this).append('clicked element id: '+this.id); //will show the unique id for the toggled element
    //$.post(); will want to put your $.post inside to also make use of "this"
});

のその他の用途this: テーブルの行を削除または追加していて、作業中の行を追跡する必要がある場合は、次のようにクリック イベント内で jQuery またはプレーンのみの JavaScript を使用できます: クリックした行番号を表示する:

$("table tr").click(function(){
    alert('jQuery: '+$(this).index()); //jQuery
    alert('javascript: '+this.rowIndex); //javascript
});

最後に、ページの読み込み時に行が存在しない場合は、jQuery のメソッドを使用してイベント委任を使用する必要があります。on()これは、最初の行以外の行をクリックできない理由でもあります。

$(document.body).on('click', "table tr", function(){
    alert('jQuery: '+$(this).index()); //jQuery
    alert('javascript: '+this.rowIndex); //javascript
});
于 2013-03-18T14:54:59.397 に答える