Question

我有3个表行，其中data-id =＆＃34;＆＃34;我希望jQuery将该id附加到段落中。所以我的HTML是这样的：

<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是这样的：

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

但是这个jQuery代码只获取第一个表的单元格数据id而不是第二行和第三行的数据ID。

当然这只是我代码的一部分，因为我需要使用PHP来使用$ _POST

由于

Answer 1

您的代码中有重复的ID。由于这个原因，$('#pmd')选择器选择id为pmd的第一个元素。 ID必须是唯一的。你能做的是

1）您可以使用公共类（比如pmd），然后使用类选择器来附加事件：

$('.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);
});

Answer 2

使用相同的ID是规则违规。不要这样做。使用class而不是id。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果你不想改变你的html点击td而不是id。但是同样的id是不好的做法。我不推荐它。

＆＃13;

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

＆＃13;

<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>

＆＃13;

仅获取第一个数据属性

2 个答案: