java - 如何为文本框运行时提供不同的ID？

Question

我只使用了单个文本框并将其放入循环中，因此它将创建多个 tetxbox。

我从 servlet 接收数据，即商品列表(购物车商品)并将其显示在 jsp 页面上。

JSP代码:

<% 

        List<Product> prodList = (List<Product>)request.getAttribute("productList");        
        Float totalbill = 0.0f;
%>

<% 
        for(Product p : prodList)
        {           
                    %>
            <tr >
              <td width="226" rowspan="3" ><img src="product_images/<%=p.getpImage() %>" width="100px" height="100px" alt="No Image" /></td>
              <td colspan="7" ><%= p.getpName() %><a onclick="removeProductById(<%= p.getpId()%>);" title="Remove From Cart" > <img alt="" src="images/delete.png" height="25px" width="25px"></a></td>
              </tr>
            <tr style="height: 28px;">
              <td colspan="6" ><div align="right"><%=p.getpPrice() %>0 &nbsp;&nbsp;&nbsp; x &nbsp;&nbsp;&nbsp; </div></td> 
              <td style="border-left:0px;"> <input type="text" value="<%=p.getQty() %>"  id="txtqty" name="txtqty"><a onclick="updateProductById(<%= p.getpId() %>,updateqty());" href="#"  title="Update Quantity"> <img alt="Updt" src="images/updatecart.png" height="25px" width="25px"> </a></td>
              </tr>
            <tr style="height: 28px;">
              <td colspan="7" style="padding-right: 10px;font-size:15px;"><div align="center">Sub Total : &nbsp;&nbsp;&nbsp;<%=p.getQty() * p.getpPrice() %>0</div></td>

              <% totalbill= totalbill +  p.getQty() * p.getpPrice();%>
              </tr>             
            <%                      
        }
%>

因此这将创建动态数据并显示在页面上。我在该页面上使用了 2 个函数来调用 servlet 并设置数量:

function updateqty()
    {
        var qty = document.getElementById("txtqty").value;
        return qty;
    }

    function updateProductById(pId,pqty)
    {
        var qty = document.getElementById("txtqty").value;
        $.getJSON("updatecart?pid=" + pId + "&minqty="+ pqty +"&rand=" + Math.floor((Math.random()*100)+1), function(json) {
            alert(json.msg);
            window.location.reload();
        });
    }

因此，当 updateqty() 函数调用时，它会获取第一个文本框的值并将其传递给 servlet，但我希望它将仅获取被单击的 tetxbox 的值。简而言之，无论我单击最后一项 tetxbox 还是任何中间项，它都会获取第一个 tetxbox 值。

页面截图

请帮忙...

Answer 1

当你生成 id 时，它们会变得动态，例如 var tid = "T"+i;和 @anchor click 在参数中使用相同的 id - updateProductById(<%= p.getpId() %>,updateqty(tid));

function updateqty(id)
{
    var qty = document.getElementById(id).value;
   return qty;
}

在添加 id 和 func 的 JSP 循环中执行此操作..

<% 
    String id ="T";int i=0;
    for(Product p : prodList)
    {           
                %>
        <tr >
          <td width="226" rowspan="3" ><img src="product_images/<%=p.getpImage() %>" width="100px" height="100px" alt="No Image" /></td>
          <td colspan="7" ><%= p.getpName() %><a onclick="removeProductById(<%= p.getpId()%>);" title="Remove From Cart" > <img alt="" src="images/delete.png" height="25px" width="25px"></a></td>
          </tr>
        <tr style="height: 28px;">
          <td colspan="6" ><div align="right"><%=p.getpPrice() %>0 &nbsp;&nbsp;&nbsp; x &nbsp;&nbsp;&nbsp; </div></td> 
          <td style="border-left:0px;"> <input type="text" value="<%=p.getQty() %>"  id="<%=id+i%>" name="txtqty"><a onclick="updateProductById(<%= p.getpId() %>,updateqty('<%=id+i%>'));" href="#"  title="Update Quantity"> <img alt="Updt" src="images/updatecart.png" height="25px" width="25px"> </a></td>
          </tr>
        <tr style="height: 28px;">
          <td colspan="7" style="padding-right: 10px;font-size:15px;"><div align="center">Sub Total : &nbsp;&nbsp;<%=p.getQty() * p.getpPrice() %>0</div></td>

          <% totalbill= totalbill +  p.getQty() * p.getpPrice();%>
          </tr>             
        <% 
        i++;                     
    }
%>