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

【问题标题】：Want to add rows to new table using jstl for loop and jquery想要使用 jstl for loop 和 jquery 向新表中添加行
【发布时间】：2017-08-02 00:12:35
【问题描述】：

我的 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>

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

Result example

我认为问题在于某些 html 或 javascript 试图获取 jstl 变量，例如 id="nombre${loop.index}" 或 $("#nombre"+'${loop.index}')。 val()

有什么帮助吗？

【问题讨论】：

也许您应该检查从 JSP 模板呈现的 HTML 或检查浏览器控制台中的任何错误消息。

标签： javascript jquery html jsp jstl

【解决方案1】：

我解决了这个问题，我在 append 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>');
				});

【讨论】：