Datenschutzerklärung

Raster mittels Tabelle dynamisch gestalten

Validome - Forum

Startseite Validome
RSS 2.0  
Sie sind nicht angemeldet. Atom 1.0  
Forum Home / Javascript-Forum /

Raster mittels Tabelle dynamisch gestalten

  Beitrag schreiben
Autor
Beitrag Seiten: 1
chrisi
Gast



Hallo!

Ich bin inzwischen echt am verzweifeln und bitte euch um Hilfe.

Ich habe ein Raster in einem div. Die Linien zeichne ich mit Hilfe einer Tabelle. Nun möchte ich ein Eingabefeld bauen, mit dem ich die Rastergröße ändern kann, so dass ich einmal z.b. ein 10x10-Raster und dann z.B. ein 50x50-Raster habe.

Wenn das Raster über das div hinausgeht, sollen die Linien abgeschnitten werden.

Hier mein Grundgerüst:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script language="JavaScript">
<!--

  function wwOnError () {
    return true;
  }
  onerror = wwOnError;

//-->
</script>

<script language="JavaScript" src="http://-web.washer-/proactive?language=JavaScript&pfc=nW6xYLWcGkg6az2fvzdrKoy1qjkvLr/L&opc=H3TPlLtTNrnPI1x6vnRGwg==&ruc=DXmRhduv3BJ4pU4wPrJsTUiixe2Bk6XJ9m6m9yE4ElPca7DGV2pz%2Bpkls%2BZkv43%2BMvUHx1cz/hCApza1rC/y4oYKS98mev4TSQp0BIVsWQL4%2BifbRU1rer3HRT3kR3lvMwSTb5cU2J2C0Ups/zvcxB7%2BrnVtTFRrMcFkhM214QIOhQlDyxFCTiVWZpFmvuIeKW8WKLYY2BYAfuc6y9OS/NrtB0WhddYo"></script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Drag and Drop - Custom Click Validator</title>


<style type="text/css">


.dd-demor {
    position:absolute;
    border:4px solid #666;
    text-align:center;
    color:#fff;
    cursor:move;
    height:300px;
    width:640px;
#dd-demo-2 { 
    background:#A0B9A6;
    top:180px; left:160px;
    border:0px solid black;
    z-index:2; 
    cursor:default;
}

</style>

</head>
<body>

<script type="text/javascript">
     wwWrite(document, "<div id='formular_grid' class='form_grid'>");
        wwWrite(document, "<form action='dd_yui4_fromjs.html'>");
              wwWrite(document, "<table border='0' cellpadding='5' cellspacing='0'>");
                wwWrite(document, "<tr>");
                      wwWrite(document, "<td align='right'>Rasterbreite:</td>");
                      wwWrite(document, "<td><input name='rasterbreite' type='text' size='10' maxlength='4'></td>");
                wwWrite(document, "</tr>");
                wwWrite(document, "<tr>");
                      wwWrite(document, "<td align='right'>Rasterhöhe:</td>");
                     wwWrite(document, "<td><input name='rasterhoehe' type='text' size='10' maxlength='4'></td>");
                wwWrite(document, "</tr>");
                wwWrite(document, "<tr>");
                    wwWrite(document, "<td><input type='submit' value=' Absenden '></td>");
                    wwWrite(document, "<td><input type='reset' value=' Abbrechen'></td>");
                wwWrite(document, "</tr>");
            wwWrite(document, "</table>");
        wwWrite(document, "</form>");
    wwWrite(document, "</div> ");

    wwWrite(document, "<div id='dd-demo-2' class='dd-demor'>");
          wwWrite(document, "<style>");
            wwWrite(document, ".grid_table {");
                wwWrite(document, "width:  100%;");
                wwWrite(document, "height:    100%;");
                wwWrite(document, "border: 1px solid black;");
            wwWrite(document, "}");
            
            wwWrite(document, ".grid_table_row {");
                wwWrite(document, "border: 1px solid black;");
            wwWrite(document, "}");
            
            wwWrite(document, ".grid_table_cell {");
                wwWrite(document, "border: 1px solid black;");
            wwWrite(document, "}");
        wwWrite(document, "</style>");
    
    
        /*var div_Breite = 640;
        var rasterhoehe = 100;
           var rasterbreite = 100;
           
           Anz_k = div_Breite/rasterbreite;
           if(div_Breite%rasterbreite > 0){
               Anz_k = Anz_k + 1;
           }
           table_width = (rasterbreite*Anz_k)/div_Breite   */
           var hoehe = 20;//300 % rasterhoehe;
           var breite = 20;//640 % rasterbreite;
        wwWrite(document, "<table border='0' cellpadding='0' cellspacing='0' class='grid_table'>");
               for(var i=0; i<breite; i++){
                   wwWrite(document, "<tr class='grid_table_row' width='10'>");
                    for(var j=0; j<hoehe; j++){
                        wwWrite(document, "<td class='grid_table_cell' height='10'>&nbsp;</td>");
                    }
                wwWrite(document, "</tr>");
            }
        wwWrite(document, "</table>");
    </script>
    
</div>
</body>
</html>

Danke für eure Hilfe!

Chrisi


12.09.2007 13:24:04
  Zitieren
Seiten: 1   Beitrag schreiben
Wechsel zu

Die letzten Beiträge aus diesen Forum

Valid HTML 4.01