Wie ändert man dynamisch die ID eines Textelements innerhalb der Iterationslogik in JSP?

Question

Hier ist der Code, den ich verwendet:

<% int number=0 %> 
<logic:iterate name="sample" id="sample1" property="lstWaferRequests" indexId="rowid"> 
<tr> 
    <% number= (rowid.intValue())+1;%> 
<td> 
    <html-el:text name="sample1" property="strExpDate" styleId='<%="Date"+number%>'/> 
</td> 

<script> 
    var x=document.getElementById("<%="Date"+number%>"); 
</script> 

<a href="javascript:show_calendar(x,'');"> 
    <img src="images/calendar.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a> 
</td> 
</tr> 
</logic:iterate> 

Ich habe versucht, eine Variable (Anzahl) zu erhöhen und an die ID von sample1 textbox hinzufügen, aber die ID für die nächste Iteration nicht verändert wird. Ich habe es mit der Inspect Element option in IE11 überprüft.

verwendete ich setatttribute() Methode in Javascript-ID zu setzen, aber ich habe einen Fehler, der,

Objekt nicht setAttribute Methode nicht unterstützt.

ich brauche die ID des Textfeldes zu ändern, die den Datumswert speichert (sample1) dynamisch da ich es als Argument an show_calendar Methode übergeben müssen.

Bitte beraten.

Answer 1

Ich habe die Klasse textbox und anchortag hinzugefügt.

Von Ihrem Link erfahren Sie, dass Sie das name Attribut der Textbox nicht id übergeben müssen.

Daher habe ich dynamische Namen hinzugefügt. Dies erreichen Sie durch strExpDate<%=number%>. Aber ich empfehle JSTL anstelle von Scriptlets. Weitere Informationen finden Sie unter java expertBalusC post How to avoid Java code in JSP files?.

Update: In Ihrer Logik Iterierte, müssen Sie diese in Ihrem Skript den geklickt Anker-Tag und am nächsten Textbox dates mit Klasse findet

<% int number=1 %> 
<logic:iterate name="sample" id="sample1" property="lstWaferRequests" > 
    <tr> 
     <td> 
      <html-el:text name="strExpDate<%=number%>" property="strExpDate" styleClass="dates" /> 
     </td> 
     <td> 
      <a class="test" href="#"> 
       <img src="images/calendar.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"> 
      </a> 
     </td> 
    </tr> 
    <% number++; %> 
</logic:iterate> 

ändern. Ich habe jQuery Bibliothek verwendet, seit Sie es markiert haben.

$(document).ready(function() { 
    $(".test").click(function(e) { 
     var value = $(e.target).closest('tr').find('.dates').val(); 
     var name = $(e.target).closest('tr').find('.dates').attr('name'); 
     alert("Name : "+name+" Value : "+value); 

     // You can call show_calendar() from here by passing name and value. 
    }); 
}); 

Siehe Demo in fiddle. Lassen Sie mich wissen, wenn eine Klärung, hoffe das hilft.

Answer 2

Konvertieren Sie die Zahlenvariable in eine Zeichenfolge und verketten Sie sie mit der IndexId. Dann wieder zurück in int. Es sollte funktionieren