Ergebnis 1 bis 2 von 2
  1. #1
    catman ist offline Mitglied
    registriert
    15-10-2004
    Beiträge
    25

    Wie kann ich aus zwei Buttons mit "onmouse" Event EINEN Button mit "onclick" basteln?

    Hi zusammen und schöne Ostern!

    Um nur jeweils den ersten Eintrag aus dreireihigen Tabellen anzuzeigen, benutze ich folgendes Skript:

    HTML-Code:
    <head>
    <script>
    <!--
    
    function ShowRow(id,min,ud){
     var o=ShowRow['zxc'+id],obj=document.getElementById(id),table=obj.getElementsByTagName('TABLE')[0],ud=typeof(ud)=='number'&&ud<0?-2:2,rows;
     if (obj&&table&&!o){
      rows=table.rows,min=typeof(min)=='number'&&min>0?min:0;
      o=ShowRow['zxc'+id]={
       rows:rows,
       lgth:rows.length-1,
       min:min,
       cnt:min
      }
      row=o.rows[o.cnt];
      obj.style.height=row.offsetTop+row.offsetHeight+'px';
     }
     if (o){
      o.cnt=Math.max(Math.min(o.cnt+ud,o.lgth),o.min);
      obj.style.height=o.rows[o.cnt].offsetTop+o.rows[o.cnt].offsetHeight+'px';
     }
    
    
    
    }
    
    -->
    </script> 
    </head>
    <body onload="ShowRow('tst1',0,-2)">
    
    <input type="button" name="" value="Weitere anzeigen" onmouseup="ShowRow('tst1',0,2);" />
    <input type="button" name="" value="Nur erste Zelle anzeigen" onmouseup="ShowRow('tst1',0,-2);" />
    
    <div id="tst1" style="width:100%;overflow:hidden;height:80px;border:solid red 1px;">
    <table>
    <tr>
    <td>Zelle 1</td>
    </tr>
    <tr>
    <td>Zelle 2</td>
    </tr>
    <tr>
    <td>Zelle 3</td>
    </tr>
    </table>
    </div>
    
    </body>
    Frage: Wie kann ich aus den beiden Buttons, mit denen ich Reihen ein- und ausblende, EINEN Toggle-Button mit onclick-Funktion basteln, der beim ersten Klick --> ShowRow('tst1',0,2) <-- und beim zweiten Klick wieder --> ShowRow('tst1',0,-2) <-- setzt?

    Kann mir da jemand helfen? Vielen herzlichen Dank!

  2. #2
    matiro65 ist offline Mitglied
    registriert
    16-10-2013
    Beiträge
    31

    AW: Wie kann ich aus zwei Buttons mit "onmouse" Event EINEN Button mit "onclick" bast

    Man könnte per Javascript in deiner ShowRow Funktion den "onirgendwas" code des Buttons jeweils neu setzten.

    Man könnte auch mittels Closure eine Schalterfunktion bauen, und weil ich Closures klasse finde seit ich glaube sie verstanden zu haben hab ich das mal gemacht. Schau mal, ob Dir Folgendes gefällt:

    HTML-Code:
    <head>
    <script>
    <!--
    
    function ShowRow(id,min,ud){
     var o=ShowRow['zxc'+id],obj=document.getElementById(id),table=obj.getElementsByTagName('TABLE')[0],ud=typeof(ud)=='number'&&ud<0?-2:2,rows;
     if (obj&&table&&!o){
      rows=table.rows,min=typeof(min)=='number'&&min>0?min:0;
      o=ShowRow['zxc'+id]={
       rows:rows,
       lgth:rows.length-1,
       min:min,
       cnt:min
      }
      row=o.rows[o.cnt];
      obj.style.height=row.offsetTop+row.offsetHeight+'px';
     }
     if (o){
      o.cnt=Math.max(Math.min(o.cnt+ud,o.lgth),o.min);
      obj.style.height=o.rows[o.cnt].offsetTop+o.rows[o.cnt].offsetHeight+'px';
     }
    }
    
    function fnDummy(){
    	var onoff = 0;
    	function fnSwitchOnOff(){
    		var obj=document.getElementById("idOnOffSwitch");
    		if (onoff===0) {
    			onoff=1;
    			obj.value="Nur erste Zelle anzeigen";
    			ShowRow('tst1',0,2);
    			}
    		else if (onoff===1) {
    			onoff=0;
    			obj.value="Weitere anzeigen";
    			ShowRow('tst1',0,-2);
    			}
    		}
    	return fnSwitchOnOff;
    	}
    
    var fnShowRowSwitch = fnDummy();
    	
    -->
    </script> 
    </head>
    <body onload="ShowRow('tst1',0,-2)">
    
    <input id="idOnOffSwitch" type="button" name="" value="Weitere anzeigen" onclick="fnShowRowSwitch()" />
    
    <!--<input type="button" name="" value="Weitere anzeigen" onmouseup="ShowRow('tst1',0,2);" />
    <input type="button" name="" value="Nur erste Zelle anzeigen" onmouseup="ShowRow('tst1',0,-2);" />-->
    
    <div id="tst1" style="width:100%;overflow:hidden;height:80px;border:solid red 1px;">
    <table>
    <tr>
    <td>Zelle 1</td>
    </tr>
    <tr>
    <td>Zelle 2</td>
    </tr>
    <tr>
    <td>Zelle 3</td>
    </tr>
    </table>
    </div>
    
    </body>
    Geändert von matiro65 (06-04-2015 um 00:28 Uhr)

Ähnliche Themen

  1. [PHP] Mit <form action="" method="post"> und Submit Button eine PHP Seite erzeugen.
    Von LikeStar im Forum Serverseitige Programmierung
    Antworten: 8
    Letzter Beitrag: 10-02-2015, 22:08
  2. Antworten: 3
    Letzter Beitrag: 17-06-2013, 00:37
  3. Antworten: 6
    Letzter Beitrag: 25-09-2009, 20:50
  4. Antworten: 3
    Letzter Beitrag: 14-10-2008, 15:15
  5. Antworten: 3
    Letzter Beitrag: 30-05-2006, 21:40

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •