最初のデータ属性のみを取ります

Question

私は3つのテーブル行に異なるdata-id = ""を持ち、jQueryでそのIDを段落に追加します。

<tr> 
<td id="pmd" data-id="123">First cell</td> 
</tr> 
<tr> 
<td id="pmd" data-id="456">Second cell</td> 
</tr> 
<tr> 
<td id="pmd" data-id="789">Third cell</td> 
</tr> 

<p id="tp"></p> 

そして、私のjQueryのは、このようなものです：：だから、私のHTMLは次のようである

$('#pmd').click(function(event) { 
    var po = $(this).data('id'); 
    $("#tp").append(po); 
}); 

をしかし、このjQueryのコードのみが第二と第三行のデータを最初のテーブルのセルデータ-IDを取得していませんids。もちろん

これは私がPHPを使用して$ _POSTにこれを使用する

おかげ

Answer 1

同じIDを使用するのはルール違反です。それをしないでください。 idの代わりにclassを使用します。

$('.pmd').click(function(event) { 
 
    var po = $(this).data('id'); 
 
    $("#tp").append(po); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td class="pmd" data-id="123">First cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="456">Second cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="789">Third cell</td> 
 
    </tr> 
 
</table> 
 
<p id="tp"></p>

あなたのhtmlクリックTDを変更する代わりにしたくない場合はid.But同じidが悪い習慣です。私はそれをお勧めしません。

$('td').click(function(event) { 
 
    var po = $(this).data('id'); 
 
    $("#tp").append(po); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td class="pmd" data-id="123">First cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="456">Second cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="789">Third cell</td> 
 
    </tr> 
 
</table> 
 
<p id="tp"></p>

Answer 2

を必要とするので、あなたは、あなたのコード内で重複したIDを持って、自分のコードの一部でしかありません。そのため、$('#pmd')セレクタはIDがpmdの最初の要素を選択します。 IDは一意でなければなりません。あなたにできることはあなたではなく、共通のクラスを使用します（PMD言う）し、イベントを添付するクラスセレクタを使用することができます）

1：

$('.pmd').click(function(event) { 
    var po = $(this).data('id'); 
    $("#tp").append(po); 
}); 

2）の表に属性データIDを用いたTD要素を検索し、それらにイベントを添付してください。

$('table td[data-id]').click(function(event) { 
    var po = $(this).data('id'); 
    $("#tp").append(po); 
});