想使用jstl for循環和jquery添加行到新表

Question

我的jsp頁面上有兩個表，第一個是使用java servlet中的列表動態創建的。此表的每一行都有一個添加按鈕，用於將點擊的行添加到輔助表。 我正在使用jstl生成第一個表和一個JQuery代碼來創建表中每個按鈕的onClick函數。 這是我的JSP代碼：

<table style="text-align: left; width: 732px;" border="1" cellpadding="2" cellspacing="2"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="vertical-align: top; width: 288px;">Nombre<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 201px;">Tipo<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 93px;">Precio<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 50px">Cantidad<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 56px;">Añadir<br> 
 
     </td> 
 
    </tr> 
 
    
 
    <c:forEach var ="tempPan" items= "${sessionScope.CATALOGO}" varStatus="loop"> 
 
    \t <!-- Link para cada compra con su campo clave --> 
 
\t \t <c:url var="linkAnyadir" value="VerCompras"> 
 
\t \t \t <c:param name="id" value="${tempPan.id}"></c:param> 
 
\t \t </c:url> 
 
\t \t \t <tr> 
 
\t \t  <td id="nombre${loop.index}" style="vertical-align: top; width: 288px;">${tempPan.nombre}<br> 
 
\t \t  </td> 
 
\t \t  <td id="tipo${loop.index}" style="vertical-align: top; width: 201px;">${tempPan.tipo}<br> 
 
\t \t  </td> 
 
\t \t  <td id="precio${loop.index}" style="vertical-align: top; width: 93px;">${tempPan.precio}<br> 
 
\t \t  </td> 
 
\t \t  <td style="vertical-align: top; width: 50px"><input id="cantidad${loop.index}" name="tCantidad"><br> 
 
\t \t  </td> 
 
\t \t  <td style="vertical-align: top; width: 56px;"><button type="button" id="add${tempPan.id}">Agregar</button><br> 
 
\t \t  </td> 
 
\t \t  </tr> 
 
\t \t <script type="text/JavaScript"> 
 
\t \t \t 
 
\t \t \t $("#add"+'${loop.index}').on("click", function(){ 
 
\t \t \t \t $('#test > tbody:last-child').append('<tr><td>'+$("#nombre"+'${loop.index}').val()+'</td><td>'+$("#tipo"+'${loop.index}').val()+'</td><td>'+$("#cantidad"+'${loop.index}').val()+'</td><td>'+$("#precio"+'${loop.index}').val()+'</td></tr>'); 
 
\t \t \t \t }); 
 
</script> 
 
\t </c:forEach> 
 
    </tbody> 
 
</table> 
 
<br> 
 
<h4>Carrito:</h4> 
 
<br> 
 
<table id="test" style="text-align: left; width: 471px;" border="1" cellpadding="2" cellspacing="2"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="vertical-align: top; width: 103px;">Nombre<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 57px;">Tipo<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 163px;">Cantidad<br> 
 
     </td> 
 
     <td style="vertical-align: top; width: 114px;">Precio<br> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

我的代碼正確生成的第一個表，但是，當我點擊添加按鈕，添加一個空行到第二個表所示：

Result example我認爲問題是有一些HTML或JavaScript試圖獲得jstl變量，如id =「nombre $ {loop.index}」或$（「＃nombre」+'$ {loop.index}'）。 .val（）

請幫忙嗎？

Answer 1

我修復了這個問題，我使用.val（）而不是.html（）來追加jquery方法。它的工作原理是：

$("#add"+'${loop.index}').on("click", function(){ 
 
\t \t \t \t $('#test > tbody:last-child').append('<tr><td>'+$("#nombre"+'${loop.index}').html()+'</td><td>'+$("#tipo"+'${loop.index}').html()+'</td><td>'+$("#cantidad"+'${loop.index}').val()+'</td><td>'+$("#precio"+'${loop.index}').html()+'</td></tr>'); 
 
\t \t \t \t });