模式未检测到 table 中每一行的 ID

Question

我有一些问题。

我只使用 php 和 bootstrap 进行更新和删除操作。我目前卡在更新中，因为只有 table 我的模态中的第一行检测到 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>

我不知道为什么它不适用于 table 中的不同行。

Answer 1

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

因此您应该从按钮中删除 ID，改为向按钮添加 class，例如editMe 所以在你的代码中你会有 class="btn btn-primary editMe"

然后将您的 jQuery 更新为：

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

现在这应该适用于每个按钮，因为它是由 class（许多按钮）而不是 ID（仅第一个按钮）触发的

模式未检测到 table 中每一行的 ID

Modal not detect id for each row in table

php

ajax

bootstrap-modal