Twitter bootstrap 如何使用jstl'在jsp页面中拥有多个不同的引导模式；什么是forEach？

我正在尝试更改jsp页面中引导模式中的内容。但是所有情态动词都显示第一项的内容。在每一行中，前两个

显示不同的内容，但只有模态中的内容相同

有人知道这里有什么问题吗

我的代码：

<table>
            <c:forEach var="item" items="${itemList}">
                <tr>
                    <td>${item.title}</td>
                    <td>${item.price}</td>
                    <td>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="viewDetailButton">Quick Shop</button>
                      <!-- Modal -->
                      <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body">
                              <div class="img">
                                <img height="150" width="150" src="${item.photoName}" />
                              </div>
                              <div class="detail">
                                  <div class="row">
                                  Color: ${item.color}
                                  </div>
                                  <hr>
                                  <div class="row">
                                  Price: ${item.price}
                                  </div>
                                  <div class="row">
                                  Size: ${item.size}
                                  </div>
                                  <%-- <div class="row">
                                  Product Description: ${item.details}
                                  </div> --%>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a>
                              <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a>
                            </div>
                          </div>

                        </div>
                      </div>
                    </td>
                </tr>
            </c:forEach>
        </table>

${item.title}
${item.price}
快餐店
&时代；
模态头
颜色：${item.Color}

价格：${item.Price}
大小：${item.Size}

每个按钮都有相同的

数据目标=“#myModal”

。因此，它的目标模态将是第一个具有

id=“myModal”

的模态

您可以使用

forEach

循环的

varStatus

，为您的modals生成唯一的ID，并将其定位在按钮中：

<table>
        <c:forEach var="item" items="${itemList}" varStatus="vs">
            <tr>
                <td>${item.title}</td>
                <td>${item.price}</td>
                <td>
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal${vs.index}" id="viewDetailButton${vs.index}">Quick Shop</button>
                  <!-- Modal -->
                  <div class="modal fade" id="myModal${vs.index}" role="dialog">
                    <div class="modal-dialog">

                      <!-- Modal content-->
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                          <div class="img">
                            <img height="150" width="150" src="${item.photoName}" />
                          </div>
                          <div class="detail">
                              <div class="row">
                              Color: ${item.color}
                              </div>
                              <hr>
                              <div class="row">
                              Price: ${item.price}
                              </div>
                              <div class="row">
                              Size: ${item.size}
                              </div>
                              <%-- <div class="row">
                              Product Description: ${item.details}
                              </div> --%>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a>
                          <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a>
                        </div>
                      </div>

                    </div>
                  </div>
                </td>
            </tr>
        </c:forEach>
    </table>

${item.title}
${item.price}
快餐店
&时代；
模态头
颜色：${item.Color}

价格：${item.Price}
大小：${item.Size}

函数addRow（产品、单位、数量=0）{
const tbody=document.getElementById（“tbody”）；
常量sr=tbody.getAttribute（“sr”）*1+1；
tbody.setAttribute（“sr”，sr）；
常量行=`
`+sr+`
`+产品+`
`+单位+`
`+数量+`
`;
tbody.innerHTML=tbody.innerHTML+行；
}

我可以再问一个问题吗？您知道如何使用jstl forEach标记动态生成一个表，该表的每一行可以有三个项（关于同一项的所有相关细节都在同一个表中），如代码所示，我只能将一个项目放在一行中。当然，您可以发布另一个问题以获得更详细的帮助，但我认为这是可能的，因为您可以使用

itemList[I]

访问

itemList

中的项目，并且可以使用

begin

进行嵌套的

forEach

循环，

end

和

var

属性。这很有帮助！谢谢对解决方案进行一些解释/简要总结总是有帮助的。

<script>
    function addRow(product, unit, qty = 0) {
        const tbody = document.getElementById("tbody");
        const sr = tbody.getAttribute("sr") * 1 + 1;
        tbody.setAttribute("sr", sr);

        const row = `<tr>
            <td style="padding:2px;">`+ sr + `</td>
            <td style="padding:2px;" id="productNameTable">`+ product + `</td>
            <td style="padding:2px;"id="unitTable">`+ unit + `</td>
            <td style="padding:2px;"id=`+ "quantityTable_" + sr + `>` + qty + `</td>
            <td style="padding: 2px;">
            <button class="btn btn-danger btn-xs"
                    data-toggle="modal" 
                    data-target="#myModalDelete"
                    onclick="dispatchDelete()">
            <i class="mdi mdi-delete"></i>
            </button>
            </td>
            </tr>`;

        tbody.innerHTML = tbody.innerHTML + row;
    }
</script>