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">
    	<!-- Link para cada compra con su campo clave -->
		<c:url var="linkAnyadir" value="VerCompras">
			<c:param name="id" value="${tempPan.id}"></c:param>
		</c:url>
			<tr>
		      <td id="nombre${loop.index}" style="vertical-align: top; width: 288px;">${tempPan.nombre}<br>
		      </td>
		      <td id="tipo${loop.index}" style="vertical-align: top; width: 201px;">${tempPan.tipo}<br>
		      </td>
		      <td id="precio${loop.index}" style="vertical-align: top; width: 93px;">${tempPan.precio}<br>
		      </td>
		      <td style="vertical-align: top; width: 50px"><input id="cantidad${loop.index}" name="tCantidad"><br>
		      </td>
		      <td style="vertical-align: top; width: 56px;"><button type="button" id="add${tempPan.id}">Agregar</button><br>
		      </td>
		    </tr>
		 <script type="text/JavaScript">
		 	
			 $("#add"+'${loop.index}').on("click", function(){
				 $('#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>');
				});
 </script>
	</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>

我的代码正确生成了第一个表，但是当我按下添加按钮时，会向第二个表添加一个void行，如：

Result example

我认为问题在于某些html或javascript尝试获取jstl变量，如id =“nombre $ {loop.index}”或$（“＃nombre”+'$ {loop.index}'）。 VAL（）

请帮忙吗？

Answer 1

我解决了这个问题，我在追加jquery方法时使用了.val（）而不是.html（）。它的工作方式如下：

$("#add"+'${loop.index}').on("click", function(){
				 $('#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>');
				});

想要使用jstl for loop和jquery向新表添加行

1 个答案: