Sipy: Device Listing

Beitrag lesen

Hi!

Ich möchte ein Device Listing erstellen wo alle meine Projektboards angezeigt werden.

(Die IP-Adressen werden später aus einem C++ File ausgelesen.)

Wenn man die Seite so öffnet kommt als Überschrift Area (entspricht der 2ten Stelle der IP-Adresse).
Dann als Optiongroup Bank (3te Stelle).

Diese Listenfelder werden dann für eine Auswahl hergenommen, nicht nur zum Auflisten.

Nur ist es nicht möglich eine Optiongroup auszuwählen so dass alle Elemente unterhalb ebenfalls selektiert werden.
Gibts da sowas wie verschachtelte Listen???

Schön wärs natürlich wenn man die Area in ein einzeiliges Listenfeld schreiben kann.
Danach die Bank ein wenig eingerückt in ein einzeiliges Listenfeld und dann die IP-Adressen selbst wieder eingerückt.
So dass die Anordnung ungefähr so aussieht wie manns im File schon erkennen kann.

Ich möchte nämlich später den Aufbau wie im Explorer gestalten mit Plus und Minus Button davor zum Ein und Ausblenden,
damit die Seite nicht zu lang wird.

Und dann gibts noch ein Problem.
Und zwar wenn ich das File so schreibe und dann ausführe, wird immer eine neue Seite geöffnet wo der JS-Code drin steht bzw die anderen Elemente die direkt im HTML drin stehen werden überschrieben.

Kann man dass so einrichten dass das JS die dynamisch generierten Elemente in eine für diesen Zweck erstellte Tabelle schreibt?

************************************************************************************

<html>
<head>
  <title></title>
  <link rel="stylesheet" media="screen" id="CSS"  type="text/css" href="styles.css">
  <link rel="stylesheet" media="print, embossed"  type="text/css" href="print.css">
  <link rel="stylesheet" media="handheld"         type="text/css" href="handheld.css">
</head>

<script type="text/JavaScript">
 function IPList(){

var Start = 0;
 var Next  = 0;
 var Entry = 0;
 var DevList = new Array("123.456.789.012","  1.  2.  3.  4","  1.  1.  3.  4","  1.  2.  2.  3","  1.  3.  1.  1","  1.  2.  3.  1","  1.  1.  2.  1");

DevList.sort();

document.writeln("<body><form name=JackpotIP>");
  document.writeln("<table><tr><td>Area "+DevList[Next].slice(4,7)+"</td></tr><tr><td>");
  document.writeln("<select name='list"+Entry+"' size='"+DevList.length+"'><optgroup label='bank"+DevList[ 0 ].slice(8,11)+"'></optgroup>");

while(Next < DevList.length){
  do{
   document.JackpotIP.elements[Entry].options[document.JackpotIP.elements[Entry].length]= new Option(DevList[Next]);
   Next++;

if(Next == DevList.length){
    break;
   }
   if(DevList[Next-1].slice(4,7) == DevList[Next].slice(4,7) && DevList[Next-1].slice(8,11) != DevList[Next].slice(8,11)){
     document.writeln("<optgroup label='bank"+DevList[Next].slice(8,11)+"'></optgroup>");
   }

}

while(DevList[Start].slice(4,7) == DevList[Next].slice(4,7));
   Entry++;

if(Next != DevList.length){
          document.writeln("</select></td></tr></table>");
          document.writeln("<table><tr><td>Area "+DevList[Next].slice(4,7)+"</td><tr><tr><td>");
          document.writeln("<select name='list"+Entry+"' size='10'><optgroup label='bank"+DevList[Next].slice(8,11)+"'></optgroup>");
   }

Start = Next;
  }

document.writeln("</select></td></tr></table>");
 document.writeln("</form></body></html>");
 }
</script>
<body bgcolor="#FFFFFF" text="#000000" onload="javascript:IPList()">

<input type="button" value="For Test">

<form name="JackpotIP">

</form>
</body>
</html>