Ändern Tabelle Kopfzeile mit Antwort auf Schaltfläche klicken, wo Zeilen mit JSTL für Schleife

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> 

aktualisieren

Ich versuche, meine Tabelle Header-Name mit der Schaltfläche klicken, so was ich tat wurde ein einfaches Java-Skript wie folgt hinzugefügt.

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

aber da meine JSTL Ergebniszeile zu so meine Header geändert aktualisiert wird für jede Schleife Transfer switch mich mit dem gleichen Kopf endet. Kann ich dies mit Jquery unter Last lösen, nicht sicher, wie man es benutzt.

Ich habe von Lösungen gehört, um 2 Tabellen zu machen, aber das ist nicht die Lösung, nach der ich suche, da die Tabelle responsive Bootstrap verwendet und auch einige Schaltflächen in den Zeilen hat.

Answer 1

Zwei Dinge, die ich aus dem Code geändert, jetzt sieht es in Ordnung,

1. nicht die JS Keyword (s) wie open reserviert anwenden. Verwenden Sie stattdessen openSchedule().

2. Für bessere Praxis, verwenden Sie span Tag für den Text ändern, anstatt ID th zu geben.

Ihre HTML mit gerenderten Tabellenzeilen (Angenommen ich jsp Werte nicht in der Lage konnten hier zu reproduzieren.)

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

Ihr Script,

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

fiddled demo Sehen Sie hier live Probe.