使用phpAjax动态填充数据库中的每一行 - Dynamically Populating each rows from database using php-Ajax

我有一个从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>

当子位置id被成功选择到staffno id中时，上面的操作会获取第一行。但它并没有为剩下的线路做这件事。我能做什么呢，它会识别第二行、第三行等，并将相应的员工编号提取到员工id中。

谢谢。

请尝试以下操作：

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>

Ajax部分：

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

唯一id的老问题，将id更改为一个类，根据更改后的select 找到所有元素

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

是的，最好使用类标识符而不是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