javascript - 具有动态输入字段的动态表中的复选框

Question

我有一个包含动态值、隐藏输入字段和动态复选框的表格。复选框具有相同的类名。当我点击一个特定的复选框时，我希望将来自该特定行的输入值发送到 ajax。

下面是动态表的代码，

<table  id="table">
<thead>
<tr>
<th >Sl.no</th>
<th >Owner Name</th>
<th >Contact Number</th>
<th class="text-center" data-title="Action">Action</th>
</tr>
</thead>
<tbody id="responsive-table-body">
<?php 
$owner=mysql_query("select id,tmp_id,name,phone,activate from pgowner where active='1'");
if(mysql_num_rows($owner)){
$i=0;
while($owner1=mysql_fetch_array($owner)){
$id=$owner1['tmp_id'];
?>
<tr>
<td><span class="label label-default"><?php echo ++$i; ?></span></td>
<td>
<a href='viewprofile?id=<?php echo $id; ?>' target='_blank' style='color:blue;text-decoration:underline;'><?php echo $owner1['name']; ?></a>
<input type="hidden" name="ownerid" value="<?php echo $owner1['tmp_id']; ?>" id="ownerid" />
</td>
<td>
<?php echo $owner1['phone']; ?>         
</td>
<td>
<input type="checkbox" name="activate[]" class="activate" id="activate" />
</td>
</tr>
<?php }  }
    ?>                
</tbody>
</table>    

这是从选中复选框的行中获取值的 ajax 代码。

<script type="text/javascript">

$(document).ready(function(){
$('#activate').click(function(){

var ownerid=$('#ownerid').val();
var myonoffswitch=$('#activate').val();

if ($("#activate:checked").length == 0)
{
var a='0';
}
else
{
var a="1";
}
$.ajax({
type: "POST",
url: "profileactivation",
data: "value="+a +"&ownerid="+ownerid,
success: function(html){
alert("Successfully Done");
}
});
});
});
</script>

我无法从选中复选框的行中获取输入值。请帮忙。

生成的 HTML 看起来像这样，

<table id="table" >
<thead>
<tr>
<th >Sl.no</th>
<th >Owner Name</th>
<th >Contact Number</th>
<th >Action</th>
</tr>
</thead>
<tbody id="responsive-table-body">
<tr >
<td ><span class="label label-default">1</span></td>
<td>
<a href="viewprofile?id=EdXzrq" target="_blank" style="color:blue;text-decoration:underline;">Name1</a>
<input type="hidden" name="ownerid" value="EdXzrq" id="ownerid">
</td>
<td>
9731269342          
</td>
<td>
<input type="checkbox" name="activate[]" class="activate" id="activate">
</td>
</tr>
<tr >
<td ><span class="label label-default">2</span></td>
<td>
<a href="viewprofile?id=RowMpg" target="_blank" style="color:blue;text-decoration:underline;">Name2</a>
<input type="hidden" name="ownerid" value="RowMpg" id="ownerid">
</td>
<td>
7760807087          
</td>
<td>
<input type="checkbox" name="activate[]" class="activate" id="activate">
</td>
</tr>
</tbody>
</table>

Answer 1

存在多个问题。

由于您在循环中拥有控件，使用 ID 将创建具有相同 ID 的多个元素，这是无效的，而是使用类或其他选择器(如属性选择器)来选择元素。

<input type="checkbox" name="activate[]" class="activate" />
<input type="hidden" name="ownerid" value="<?php echo $owner1['tmp_id']; ?>" />

然后使用类选择器注册点击处理器，然后在同一行中找到所有者 ID，如下所示

$(document).ready(function() {
  $('.activate').click(function() {
    var ownerid = $(this).closest('tr').find('input[name="ownerid"]').val();
    var a = this.checked ? 1 : 0;

    $.ajax({
      type: "POST",
      url: "profileactivation",
      data: {
        value: a,
        ownerid: ownerid
      },
      success: function(html) {
        alert("Successfully Done");
      }
    });
  });
});