jstl forループとjqueryを使用して新しいテーブルに行を追加したい

Question

私のJSPページに2つのテーブルがあります。最初のテーブルはJavaサーブレットのリストを使用して動的に作成されます。この表の各行には、クリックされた行をセカンダリ表に追加するための追加ボタンがあります。 私は最初のテーブルとテーブルのすべてのボタンのonClick関数を作成するJQueryコードを生成するためにjstlを使用しています。私の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

id = "nombre $ {loop.index}"や$（ "＃nombre" + '$ {loop.index}'のようなjstl変数を取得しようとしているhtmlやjavascriptに問題があると思います。 .val（）

助けてください？

Answer 1

私はこの問題を解決しました。私は追加のjqueryメソッドで.html（）の代わりに.val（）を使用していました。たぶん、あなたは、JSPテンプレートからレンダリングされたHTMLを確認するか、ブラウザのコンソールにエラーメッセージを確認する必要があります

$("#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 });