suche zahlen picker @ tutorials.de: Tutorials, Forum & Hilfe

hups1803 · 22.07.09 21:13

hallo ,
es gibt ja div datepicker usw ich suche aber eine möglichkeit zahlen aus einer liste auszuwählen und die dan in ein iputfelt type text eintragen zu lassen.

es geht dabei um folgendes wir haben ein levelsystem welches aber nur bis 10 geht nun kann man die level mit selekt auszuchen da wir dieses aber auf 630 erweitern wollen stell ich mir das so vor zb mit chekboxen .

1 reihe vertical einer von 1-10
dann daneben zehner con 10-100
und wieder daneben hunderter von 100-1000 nun wen ich in der reihenfolge zb 430 haben will klicke ich die chekbox
1 reihe=0
2reihe= 3
3reihe=4

an und möchte nun das man mit einen input button die selektirten boxen in ein textfeld einträgt so das im feld 430 steht.

kann mir bitte jemand helfen.

wie muss der code ausschauen ?

das er das selektierte da einträgt?

mfg

Sven Mintel · 23.07.09 14:37

Moin,

hier mal nen Beispiel, wie das gehen könnte:

HTML-Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-07-23" />
<title>Test</title>
<script type="text/javascript">
<!--
fx=function(range,replace,caption,tableClass,activeClass)
{
  this.tbl=document.createElement('TABLE');
  this.tbl.className=tableClass;
  this.args={
             'range':String(range).split(''),
             'replace':replace,
             'caption':caption,
             'activeClass':activeClass,
             'tableClass':tableClass
             };
  var _this=this;
  
  this.createRows=function()
  {
    var part=this.args.range.shift();
    var row=this.tbl.insertRow(this.tbl.rows.length);
    row.setAttribute('title',0);
    for(i=0;i<10;++i)
    {
      var cell=document.createElement((i>part)?'TD':'TH');
      if(!i)cell.className=this.args.activeClass
      var txt=document.createTextNode(
                                    (i<=part)
                                      ? i
                                      : (i==10)
                                          ? 0
                                          : ' '
                                 );
      cell.appendChild(txt);
      row.appendChild(cell);
    }
  }
  
  while(this.args.range.length)
  {
    this.createRows();
  }
  var thead=this.tbl.createTHead().insertRow(0).insertCell(0);
  thead.setAttribute('colSpan',10);
  thead.appendChild(document.createTextNode(this.args.caption));
  var tfoot=this.tbl.createTFoot().insertRow(0).insertCell(0);
  tfoot.setAttribute('colSpan',10);
  var input=document.getElementById(this.args.replace).cloneNode(true);
  input.removeAttribute('id');
  tfoot.appendChild(input);
  this.tbl.onclick=function(e)
  {
    var t=(window.event)?window.event.srcElement:e.target;
    if(t.tagName=='TH')
    {
      var r=t.parentNode;
      r.title=t.firstChild.nodeValue;
      for(i=0;i<10;++i)
      {
        if(r.cells[i].tagName=='TH')
        {
          r.cells[i].className=(r.cells[i]==t)
                              ? _this.args.activeClass
                              :'';
        }      
    }
    var v=[];
    for(r=1;r<_this.tbl.rows.length;++r)
    {
      v.push(_this.tbl.rows[r].getAttribute('title'));
    }
    _this.tbl.getElementsByTagName('input')[0].value=Number(v.join(''));
  }
 }
 document.getElementById(this.args.replace)
         .parentNode
         .replaceChild(this.tbl,document.getElementById(this.args.replace));
}
//-->
</script>
<style type="text/css">
<!--
.aktivklasse{
    background:red
}
.tabellenklasse{
    empty-cells:show
}
.tabellenklasse tbody *{
    border:1px solid #717171;
    width:20px;
}
.tabellenklasse thead td,
.tabellenklasse tfoot td{
    text-align:center;
    background:#c1c1c1;
    font-weight:bold;
}
-->
</style>
</head>
<body>
<input id="testfeldid" name="testfeldname">
<script type="text/javascript">
<!--
new fx(4711,'testfeldid','Bewertung','tabellenklasse','aktivklasse');
//-->
</script>
</body>
</html>

fx() ist die Funktion(besser gesagt das Objekt), was alles erledigt.
Der Aufruf:

Code :

1 2	new fx(4711,'testfeldid','Bewertung','tabellenklasse','aktivklasse');

Es werden ein paar Infos erwartet:

Die Obergrenze der Bewertung,
Die ID eines bereits vorhandenen Textfeldes. Dieses wird fx() im Weiteren durch den Picker ersetzen....im Beispiel testfeldid
Eine Überschrift für den Picker,im Beispiel Bewertung
Der Picker wird eine Tabelle sein...für die Gestaltung kannst du einen Klassennamen angeben,im Beispiel tabellenklasse
ein Klassenname für angeklickte Zellen, im Beispiel aktivklasse

Das wars eigentlich schon...das Beispiel ist so lauffähig.
Achte darauf, dass ein Aufruf von fx() im Quelltext nach dem per ID referenzierten Textfeld stehen muss.

Du kannst das beliebig oft pro Seite verwenden...musst halt jedes mal zumindest eine andere ID für das Texfeld übergeben.

Testbeispiel: http://doktormolle.de/temp/344327/

Falls du Fragen zu Einzelheiten der Arbeitsweise hast...frag

hups1803 · 23.07.09 14:42

danke super teil hab schon was ähnliches gefunden ein taschenrechner hab den umgebaut

HTML-Code:

<script language="JavaScript">
<!--
  string="";
  function app(cc) {
    string+=cc;
    document.form1.text1.value=string;
  }
  function cclear() {
    string="";
    document.form1.text1.value=string;
  }
  function calc() {
    if(string.length > 0) {
      inp="out="+string;
      eval(inp);
    } else {
      out="0";
    }
    document.form1.text1.value=out;
    string=""+out;
  }
  function upda() {
    string=""+document.form1.text1.value;
  }
//-->
</script>
</head>
<body onLoad="cclear()">
<form name="form1" method="POST" onSubmit="{upda(); calc(); return false;}">
<table border>
<tr><td colspan=5><input type="text" size=16 maxlength=80 name="text1" value="" onChange="upda()"></tr>
<tr>
  <td align=center><input type="button" value=" 7 " onClick="app('7')">
  <td align=center><input type="button" value=" 8 " onClick="app('8')">
  <td align=center><input type="button" value=" 9 " onClick="app('9')">
  
  <td align=center><input type="button" value=" C " onClick="cclear()">
</tr><tr>
  <td align=center><input type="button" value=" 4 " onClick="app('4')">
  <td align=center><input type="button" value=" 5 " onClick="app('5')">
  <td align=center><input type="button" value=" 6 " onClick="app('6')">
  
 
</tr><tr>
  <td align=center><input type="button" value=" 1 " onClick="app('1')">
  <td align=center><input type="button" value=" 2 " onClick="app('2')">
  <td align=center><input type="button" value=" 3 " onClick="app('3')">
  
  
</tr><tr>
  <td align=center><input type="button" value=" 0 " onClick="app('0')">
  <td align=center><input type="button" value=" - " onClick="app('-')">
  
  
  <td align=center><input type="button" value=" + " onClick="app('+')">
  
</tr>
</table>
</form>
</body>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Römische Zahlen umwandeln bei Suche

Farben per Picker ersetzen

data picker

Color Picker hilfe

Color picker?

E-Mail:

Abonnieren Abbestellen