JSPでforループを使用しているすべてのIDで削除が機能しない

Question

私はレコードのテーブルを持っています。削除オプションが含まれています。クリックして削除すると1つのテキストエリアがポップアップし、そのポップアップで[OK]をクリックするとそのレコードが削除されます。それは最初のレコードのためだけに働いています。 2番目のレコードをクリックすると、それは機能しません。私はそれが私の問題だと思った。しかし、私はこの問題を解決するためのいかなる考えも得ていませんでした。

ここに私のコードです。

<%for(int i=0;i<joborderlist.size();i++){ %> 
     <tr> 
      <td><%=i+1 %></td> 
      <td><%=joborderlist.get(i).getSno()%></td> 
      <td><%=joborderlist.get(i).getJobCreatesOnasString()%></td> 
      <td><%=joborderlist.get(i).getCaseno()%></td> 
      <td><%=joborderlist.get(i).getAdjustername()%></td> 
      <td><%=joborderlist.get(i).getOwnername()%></td> 
      <td><a href="#" style="text-decoration:none;border-bottom:1px solid black;" id="delete">Cancel 
       </a> 
      </td> 

      </tr> 
     <div id="backsheet"></div> 
      <div id="popupBox"> 
        <span class="buttonClose">X</span> 
        <div id="top1"> 
       </div><BR><BR> 
        <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/DeleteRecords" method="post" id="wlogForm" autocomplete="off"> 
        <!-- hidden values --> 
        <input type="hidden" name="joborder_id" value="<%=joborderlist.get(i).getSno()%>" id="branchid"> 
        <input type="hidden" name="deleted_by" value="<%=session.getAttribute("emp_email")%>" id="branchid"> 
        <span class="title_txt"><span id="add_ttl">Reason :</span></span> 
        <textarea rows="5" cols="50" name="reason" id="reason" style="margin: -34px 7px -30px 6px;"></textarea><br> 
        <br> 
        <br> 
        <div><span id="reasonmsg" style="color: red;margin-right: 190px;"></span></div> 
        <div class="submit"><input id="branchbutton" type="submit" value="Ok" name="submit" onclick="return validation();" style="margin-left: 115px;"/> 
             <input id="branchbutton" type="button" value="Cancel" name="submit" class="buttonCancel" style="margin: 17px 0px 0px 19px;"/> 
        </div> 
       </form> 
       </div> 
      <%}%> 

これは、これは私のレコードをテーブル

あるポップアップ

<script type="text/javascript"> 
      $(document).ready(function() { 
      $("#delete").click(function() { 
        $('#branchbutton').show(); 
        $("#popupBox").show(); 
        $("#backsheet").show(); 
         $(".buttonClose").click(function() { 
          $("#popupBox").hide(); 
          $("#backsheet").hide(); 
         }); 
        $(".buttonCancel").click(function() { 
         $("#popupBox").hide(); 
         $("#backsheet").hide(); 
         }); 
        }); 
       }); 
     </script> 

ための私のスクリプトである私を助けてください。あなたがすることを学ぶ必要が

<script type="text/javascript"> 
       $(document).ready(function() { 
       $(".cancel").click(function(e) { 
         e.preventDefault(); 
         $(this).closest('tr').find("#backsheet").show(); 
        }); 
        $(".buttonClose").click(function() { 
         $(this).closest('#backsheet').hide(); 
        }); 
        $(".buttonCancel").click(function() { 
         $(this).closest('#backsheet').hide(); 
        }); 

       }); 
    </script> 

：

が

<td><a href="#" style="text-decoration:none;border-bottom:1px solid black;" class="cancel">Cancel 
       </a> 
      </td> 

jsのリンクにクラスを追加します。

Answer 1

適切に相対的な要素を取得するために$(this).closest('.form-horizontal')を使用して、あなたの最初のクリックイベントを閉じますループがある場合、ループ内の要素へのクラスが必要です

Answer 2

問題が発生した場所は、 onclick="return validation();"

にあります。検証部分には何がありますか？

また、作成する構造が正しくありません。

<table> 
<tr><td></td></tr> 
<div></div> 
<tr><td></td></tr> 
<div></div> 
</table> 

無効なタグ構造の問題を引き起こす可能性があります。