动态填充数据库中的每一行使用php-Ajax

Question

我有一个从mysql数据库动态填充的表。用户应该选择一个staff number，它会自动进入数据库并获取他的员工编号。我有10行。它适用于第一行，但不适用于其他其他行。

请看看我错过它的代码和建议。

由于

<tr> 
    <th nowrap="nowrap">S/N</th> 
    <th nowrap="nowrap">VNO</th> 
    <th nowrap="nowrap">Name</th> 
    <th nowrap="nowrap">Staff No</th> 
</tr> 
<tr> 
    <?php 
    $c=0; 
    $st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'"); 
    while($r = mysqli_fetch_array($st)){ $c++?> 
    <td><?php echo $c;?></td> 
    <td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td> 
    <td><select name="opname[]" class="form-control" id="subloc"> 
    <option>Select...</option> 
    <?php 
     $fs = getOperators($_SESSION['location']); 
     while($f = mysqli_fetch_array($fs)){?> 
      <option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option> 
    <?php };?> 
    </select></td> 
    <td id="staffno"></td> 
</tr> 

Ajax的侧：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#subloc").change(function(){ 
     var sname = $("#subloc option:selected").val(); 
     $.ajax({ 
      type:"POST", 
      url:"process-opno.php", 
      data:{opname:sname} 
     }).done(function(data3){ 
      $("#staffno").html(data3); 
     }); 
    }); 
}); 
</script> 

当成功地选入staffno ID subloc ID上面取第一行。 但它没有为剩余的线路做。我能做什么，它会识别第二行，第三行等，并将相应的员工编号提取到staffno id中。

谢谢。

Answer 1

请试试这个：

PHP部分我已经加入classes的选择框，选择框AJAX结果

<tr> 
<?php 
    $c=0; 
    $st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'"); 
    while($r = mysqli_fetch_array($st)){ 
    $c++; 
?> 
    <td><?php echo $c;?></td> 
    <td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td> 
    <td> 
     <select name="opname[]" class="form-control js-sel-box" data-id="<?php echo $c;?>"> 
      <option>Select...</option> 
      <?php 
       $fs = getOperators($_SESSION['location']); 
       while($f = mysqli_fetch_array($fs)){ 
      ?> 
        <option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option> 
      <?php 
       }; 
      ?> 
     </select> 
    </td> 
    <td class="js-sel-box-ajax-result-<?php echo $c;?>"></td> 
<?php 
    }//End While 
?> 
</tr> 

阿贾克斯部分：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".js-sel-box").change(function(){ 
     var sname = $(this).val(); 
     var result_id = $(this).attr("data-id"); 
     $.ajax({ 
      type:"POST", 
      url:"process-opno.php", 
      data:{opname:sname} 
     }).done(function(data3){ 
      $(".js-sel-box-ajax-result-"+result_id).html(data3); 
     }); 
    }); 
}); 
</script> 

Answer 2

同样的老问题有唯一的ID，该ID变成一个类，查找基于所有元素的改变选择

<script type="text/javascript"> 
$(document).ready(function() { 
    $("td select.form-control").change(function(){ 
    var sname = $(this).val(); 
    var el = $(this); 
    $.ajax({type:"POST",url:"process-opno.php",data:{opname:sname}}) 
    .done(function(data3){ 
    $(this).parent().next("td").html(data3); 
    }); 
    }); 
}); 
</script> 

Answer 3

是的，它最好使用类标识符而不是id来标识多个DOM元素;但在你的它可以用最小的变化可行 -

// use 
var sname = $(this).val(); 
//put this line just var sname 
var $object =$(this); 
// instead of 
var sname = $("#subloc option:selected").val(); 
// this is because- $('#subloc option:selected').val(); always returns the first 
//dropdownList/optionlist from the DOM array, you can use `this` to track which DOM has been change recently 

// another change in your code $object is $(this) equivalent but will not work inside ajax so you need to create $object as in code above.. 
// put this line 
$($object).parents('tr').find("#staffno").html(data3); 
//instead of 
$("#staffno").html(data3); 
// above line will search parent tr and will look for DOM element with id staffno a