通过响应按钮单击更改表标题，其中行使用 JSTL for 循环更新

Change table header with response to button click ,where rows update using JSTL for loop

本文关键字：JSTL 更新 循环 for 按钮 响应 单击 标题      更新时间：2024-03-13
<div class="btn-group" >    
    <button type="submit"  onclick="display">DISPLAY SCHEDULE</button>
    <button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>        
<table  class="table table-striped responsive">
    <!-- column headers -->
    <% Result result = (Result)request.getAttribute("result");%>
    <thead>
        <tr>
            <th id="change"> Transfer Switch </th>
        </tr>
    </thead>
    <!-- column data  -->
    <tbody>
    <c:forEach var="row" items="${result.rows}">
        <tr>
            <td>
                <c:out value="${row.Schedule_ID}"/>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>

我正在尝试通过单击按钮更改我的表头名称，所以我所做的是添加一个简单的 java 脚本，如下所示。

<script>
    function display(){
        document.getElementById("change").innerHTML="display"
    }
    function open(){
      document.getElementById("change").innerHTML="open"
    }
</script>

但是由于我的 JSTL 结果行在每个循环中都会更新，我的标头也发生了变化，因此以相同的标头Transfer switch结束了自己。我可以在加载时使用 Jquery 解决这个问题吗??,不确定如何使用它。

我

听说过制作 2 张桌子的解决方案，但这不是我正在寻找的解决方案，因为该表是响应式的，使用引导程序并且其行中也有一些按钮。

我从你的代码中更改了两件事，现在看起来不错，

  1. 不要使用 JS 保留关键字，如 open 。请改用openSchedule()。

  2. 为了更好地练习，请使用 span 标记更改文本，而不是将 id 提供给th。

带有呈现的表行的 HTML(假设我无法在此处重现 jsp 值。

<div class="btn-group" >    
    <button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
    <button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>        
<table  class="table table-striped responsive">
    <thead>
        <tr>
            <th><span id="change">Transfer Switch</span></th>
        </tr>
    </thead>
    <tbody>
          <!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
          <tr>
            <td>Text1</td>
          </tr>
          <tr>
            <td>Text2</td>
          </tr>
    </tbody>
</table>

你的脚本，

window.displaySchedule = function(){
   document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
   document.getElementById("change").innerHTML="open";
}

在此处查看小提琴演示以获取实时样本。

相关文章：