Onclick met meerdere buttons - Softwareontwikkeling

dinsdag 9 september 2008 15:34

Acties:

Verwijderd

Topicstarter

Hallo allemaal,

Ik heb in een script meerdere buttons staan die een fucntie aanroepen met een ander ID.
echter als ik nu maar een button in het script heb staan gaat het goed.

Als ik er meerdere buttons in heb staan moet ik net zo vaak klikken als dat ik buttons heb.

hoe kan dit?

onder staande is broncode

HTML:

<html>
<head>
    <title>Untitled</title>
</head>

<body onload="theTable.style.display='none'; theTable2.style.display='none'; theTable3.style.display='none';">
<script type="text/javascript">

var rowVisible = true;

function toggleDisplay(tbl) {
   tbl.style.display="";
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}

</script>

<table id="theTable" border="1">
   <tr id="rows1" class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   
</table>

<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable'))" />

<table id="theTable2" border="1">
   <tr class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
</table>

<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable2'))" />

<table id="theTable3" border="1">
   <tr class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
</table>

<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable3'))" />

</body>
</html>

dinsdag 9 september 2008 16:01

Acties:

André

Analytics dude

Je gebruikt 1 global rowVisible om de zichtbaarheid in bij te houden, kijk daar maar eens naar. Verder is dit niet een scriptfixdesk dus je zult ook zelf moeite moeten doen

dinsdag 9 september 2008 16:10

Acties:

Noork

Is het sowieso niet handiger om het document.getElementById-stukje te verplaatsen naar de functie. Scheelt weer wat regels. Je hoeft ook niet te spelen met de class van het object, gebruik maken van het ID is voldoende. Daarnaast hoef je niet het wiel opnieuw uit te vinden. Gebruik b.v. de 2e code op deze pagina: http://www.dustindiaz.com/seven-togglers/ (is best een standaard scriptje, werkt perfect)

p.s.: Je hoeft niet alle TD's te posten, die zijn verder niet relevant. Overzichtelijker wordt het zo niet.

dinsdag 9 september 2008 16:13

Acties:

Verwijderd

Topicstarter

Oke

Klopt dit was alleen maar voor te testen.
Ik ben niet zo'n javascript expert dat mij dat geheel makkelijk afgaat.

toch bedankt ik heb het inderdaad gevonden. !!!

Echter de onload style wordt door FF niet verwerkt. iemand een idee?

[ Voor 60% gewijzigd door Verwijderd op 09-09-2008 16:20 ]

dinsdag 9 september 2008 17:00

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 09 september 2008 @ 16:13:
Echter de onload style wordt door FF niet verwerkt. iemand een idee?

Omdat standards compliant browsers niet de global namespace vervuilen met element-id's (met andere woorden: gebruik getElementById)

Intentionally left blank