模式无法为表中的每一行检测ID

Question

我有问题。

我仅使用php和bootstrap进行更新和删除操作。我目前处于更新状态，因为只有我的模态表中的第一行才能检测到id的详细信息。在其他行上，我的模型未根据选定的ID检测到也未显示详细信息。

这是我的模式按钮，删除有效，但更新无效。它适用于第一行的数据。

<td>
 <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editModal" id="edit" 
  period_id="<?=$claimlist['period_id']?>" 
  year="<?=$claimlist['year']?>"
  month="<?=$monthName;?>" 
  start_date="<?=$claimlist['start_date']?>" 
  end_date="<?=$claimlist['end_date']?>" >Edit</button>
</td> 

我的模态过程：

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Claim Period Information</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
     </div>
     <form action="editperiodprocess.php" id="form" method="post" name="form">
       <div class="modal-body">
         <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
           <tr>
             <td>Month/Year: <input type="hidden" name="period_id" id="period_id" value="" ></td>
             <td><span id="monthyear"></td>
           </tr>
           <tr>
             <td>Start Date:</td>
             <td><input type="date" name="start_date" id="start_date" value="" class="startdate"></td>
           </tr>
           <tr>
             <td>Start Date:</td>
             <td><input type="date" name="end_date" id="end_date" value="" class="enddate"></td>
           </tr>
         </table>
        </div>
       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" form = "form" value="Approve" class="btn btn-primary">Submit</button>
       </div>
     </form>
   </div>
 </div>
</div>

我的Ajax：

<script>
  $( function() {

    $("#edit").on("click",function(){
      $("#period_id").val( $(this).attr('period_id') );
      $("#monthyear").html( $(this).attr('month') + " " + $(this).attr('year') );
      $("#start_date").val( $(this).attr('start_date') );
      $("#end_date").val( $(this).attr('end_date') );
    });

  } );
</script>

我不知道为什么它不适用于表中的其他行。

Answer 1

您在每行上都具有ID“ #edit”。 ID只能使用一次。请参阅Several elements with the same ID responding to one CSS ID selector

因此您应从按钮中删除ID，而应在按钮中添加一个类，例如editMe，因此在您的代码中将有class="btn btn-primary editMe"

然后将您的jQuery更新为：

$(".editMe").click(function(){
    //do your stuff here
});

现在这应该对每个按钮都有效，因为它是由班级（许多按钮）而不是ID（仅第一个按钮）触发的]