Question

<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 on load ??来解决这个问题，不知道如何使用它。

我听说制作2个表的解决方案，但这不是我要寻找的解决方案，因为表是响应式的，使用bootstrap并且行中也有一些按钮。

Answer 1

我已从代码中更改了两件事，现在看起来很好，

不要使用像open这样的JS保留关键字。请改用openSchedule()。



为了更好地练习，请使用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";
}

请在此处fiddled demo查看实时样本。

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

1 个答案: