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

Question

我有一个从mysql数据库动态填充的表，希望用户选择一个staff number ，该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>

当成功将subloc id选择为staffno 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>

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>

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