Question

我遇到了问题，因为即使点击表格的最后一个元素，我也总是得到第一个值。

<table>
<?php 
    for($i=1;$i<=5;$i++){
?>
<tr>
   <td><input type="text" id="testId" value="{$i}"><td>
   <td><button class="testButton">Click Me</button></td>
</tr>
<?php
}
?>
</table>

用于js文件

$(document).ready(function(){
   $( ".testButton" ).click(function(){
          var a = document.getElementById("testId").value;
          alert(a);
   });
});

我如何获得每个值？

Answer 1

不要忘记你确实需要echo $i的价值。正确关闭<td>标记也很重要。

<table>
<?php for($i=1;$i<=5;$i++){ ?>
<tr>
   <td><input type="text" class="testClass" value="<?php echo $i; ?>"></td>
   <td><button class="testButton">Click Me</button></td>
</tr>
<?php } ?>
</table>

然后在JS上，只需遍历前一个<td>以获取输入值：

$(document).ready(function(){
    $('.testButton').click(function(e){
        var a = $(this).parent().prev('td').children('input.testClass').val();
        alert(a);
    });
});

Sample Output

Answer 2

您只能为一个元素分配id。在这种情况下，您可能希望分配不同的id，如下所示。

<td><input type="text" id="testId{$i}"><td>
<td><button class="testButton" data-target="#testId{$id}">Click Me</button></td>



$(document).ready(function(){
   $( ".testButton" ).click(function(){
          var target = $(this).data("target");
          var a = $(target).val();
          alert(a);
   });
});

我如何通过下面的代码片段获得不同的价值

2 个答案: