www.webdeveloper.com
Results 1 to 2 of 2

Thread: table generator with html and javascript

  1. #1
    Join Date
    Dec 2012
    Posts
    5

    table generator with html and javascript

    In this assignment you will be asked to create an HTML file that uses JavaScript to create a
    table. Your table will have a certain number of rows and columns, the cells in the table will have
    different colors, and the cells will contain random numbers.
    Your HTML file should have a form in it that allows the user to specify:
    • the number of rows in the table (from 1 – 10)
    • the number of columns in the table (from 1 – 6)
    • the selection of different colors to use
    • the bottom of the range of random numbers (must be an integer greater than zero)
    • the top of the range of random numbers (must be an integer less than or equal to 100)
    • the position of the table
    Numeric fields should be checked to make sure that the user specified a correct value.
    The selection of colors should be a checkbox for black, white, red, orange, yellow, green, blue
    and purple. If a checkbox is checked, that color should be used. At least one box must be
    checked.
    The position should be a radio button for left, center (the default) or right.


    this is how far i have gotten
    :

    <html>
    <head>
    <title>
    Babatunde Millar-Jaja - CS103 Section #5 - JavaScript Homework #4
    </title>

    <style type="text/css">
    BODY {
    background-color : blue;
    }

    #messages {
    font-weight : bold;
    font-size : 18pt;
    }

    .white { background-color : white; }
    .black { background-color : black; }
    .red { background-color : red; }
    .orange { background-color : orange; }
    .yellow { background-color : yellow; }
    .green { background-color : green; }
    .blue { background-color : blue; }
    .purple { background-color : purple; }


    </style>

    </head>
    <div>

    <body>
    <center>


    <form name = "Tablegenerator">

    <label>Number of Rows: <input type = "number" name = "rows" id="rows" min=1 max=10 /></label><br/>

    <label>Number of Columns: <input type = "number" name = "columns" id="columns" min=1 max=6 /></label><br/>

    <label>Floor of Random Numbers: <input type = "number" name = "Floor" id="floor" min = 1 max = 100 /></label><br/>

    <label>Ceiling of Random Numbers: <input type = "number" name = "ceiling" id = "ceiling" min = 1 max = 100 /></label><br/>

    <input type="radio" name = "RightAlignment" value = "right" >Right Alignment<br>

    <input type="radio" name = "CenterAlignment" value = "center">Center Alignment<br>

    <input type="radio" name = "LeftAlignment" value = "left">Left Alignment<br>

    <input name = "generate" type = "button" value = "CREATE MY TABLE" onclick="createtable()" />

    </form>


    </div>
    <div>


    <input type = "checkbox" onclick='setmsgcolor("red");'>Red</button>

    <input type = "checkbox" onclick='setmsgcolor("yellow");'>Yellow</button>

    <input type = "checkbox" onclick='setmsgcolor("green");'>Green</button>

    <input type = "checkbox" onclick='setmsgcolor("black");'>Black</button>

    <input type = "checkbox" onclick='setmsgcolor("white");'>White</button>

    <input type = "checkbox" onclick='setmsgcolor("blue");'>Blue</button>

    <input type = "checkbox" onclick='setmsgcolor("orange");'>Orange</button>

    <input type = "checkbox" onclick='setmsgcolor("purple");'>Purple</button>


    <div id="messages">
    <b>HELLO, WELCOME TO MY PROGRAM. ENTER THE INFORMATION ABOVE.</b>
    <div id ="wrapper"></div>

    </div>
    </center>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2007
    Posts
    301
    If I understand, I am trying this:
    Code:
      
    <html>
    <head>
    <title>
    Babatunde Millar-Jaja - CS103 Section #5 - JavaScript Homework #4
    </title>
    
    <style type="text/css">
    BODY {
    background-color : turquoise;
    }
    
    #messages {
    font-weight : bold;
    font-size : 18pt;
    }
    
    .white { background-color : white; }
    .black { background-color : black; }
    .red { background-color : red; }
    .orange { background-color : orange; }
    .yellow { background-color : yellow; }
    .green { background-color : green; }
    .blue { background-color : blue; }
    .purple { background-color : purple; }
    
    
    </style>
    
    
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?270325-table-generator-with-html-and-javascript
    // http://www.w3schools.com/html/html5_form_input_types.asp
    
    function tabloYapmaca () {
    
    var sa = document.getElementById('satirlar').value;
    var su = document.getElementById('sutunlar').value;
    
    // http://www.w3schools.com/jsref/jsref_number.asp
    // alert(typeof( document.getElementById('minik').value));  // string
    
    var minik = Number( document.getElementById('minik').value ) ;
    var tavan = Number(  document.getElementById('tavan').value ) ;
    
    /*
    var A = []; 
    for(var n = minik; n<=tavan; n++ ) {
    A[A.length]= n;
    }
    alert(A);
    alert( A[Math.floor((Math.random()* A.length ) )] ); 
    */
    
    
    // http://www.w3schools.com/jsref/jsref_random.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_random3
    // Math.floor((Math.random()*100)+1);
    
    //var rs = Math.floor((Math.random()* (tavan - minik ))+ minik );
    
    //alert(rs);
    
    var B = []; 
    for(var m =0; m< (sa*su); m++) {
    B[B.length] = Math.floor((Math.random()* (tavan - minik + 1 ))+ minik );
    }
    alert('elements of array B (B dizisinin elemanları) =   ' + B );
    
    
    var s='<table border= "1" >';
    var no = 0; 
    for(var i=0; i< sa; i++) {
    s+=  '<tr>'; 
    for(var k = 0; k < su; k++) {
     s +=  '<td>'+ B[no++] +'</td>'; 
    }
    s+=  '</tr>'; 
    }
    s+=  '</table>'; 
    
    var d = document.getElementById('pano');
    d.innerHTML = s;
    
    }
    
    // http://www.w3schools.com/tags/att_table_align.asp
    // http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_align2
    
    // http://www.w3schools.com/jsref/prop_radio_checked.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked
    
    
    // http://www.w3schools.com/jsref/prop_checkbox_checked.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order
    
    </script>
    </head>
    <div>
    
    <body>
    <center>
    
    
    <form name = "Tablegenerator">
    
    <label>Number of Rows: (Satırların sayısı )<input type = "number" name = "rows" id="satirlar" min=1 max=10 /></label><br/>
    
    <label>Number of Columns: (Sütunların sayısı ) <input type = "number" name = "columns" id="sutunlar" min=1 max=6 /></label><br/>
    
    <label>Floor of Random Numbers: ( Rastgele sayıların en küçüğü ) <input type = "number" name = "Floor" id="minik" min = 1 max = 100 /></label><br/>
    
    <label>Ceiling of Random Numbers: ( Rastgele sayıların en büyüğü ) <input type = "number" name = "ceiling" id = "tavan" min = 1 max = 100 /></label><br/>
    
    <input type="radio" name = "Alignment" value = "right" >Right Alignment ( Sağa hizala )<br>
    
    <input type="radio" name = "Alignment" value = "center">Center Alignment ( Ortaya hizala)<br>
    
    <input type="radio" name = "Alignment" value = "left">Left Alignment ( Sola hizala ) <br>
    
    <input name = "generate" type = "button" value = "tablo yap" onclick="tabloYapmaca ()" />
    
    </form>
    
    
    
    
    <input type = "checkbox" onclick='setmsgcolor("red");'>Red</button>
    
    <input type = "checkbox" onclick='setmsgcolor("yellow");'>Yellow</button>
    
    <input type = "checkbox" onclick='setmsgcolor("green");'>Green</button>
    
    <input type = "checkbox" onclick='setmsgcolor("black");'>Black</button>
    
    <input type = "checkbox" onclick='setmsgcolor("white");'>White</button>
    
    <input type = "checkbox" onclick='setmsgcolor("blue");'>Blue</button>
    
    <input type = "checkbox" onclick='setmsgcolor("orange");'>Orange</button>
    
    <input type = "checkbox" onclick='setmsgcolor("purple");'>Purple</button>
    
    
    <div id="messages">
    <b>HELLO, WELCOME TO MY PROGRAM. ENTER THE INFORMATION ABOVE.</b>
    <div id ="pano"></div>
    
    </div>
    </center>
    </body>
    </html>
    Last edited by Ayşe; 12-19-2012 at 05:28 PM.
    İyiliği emret. Kötülükten alıkoy. (31/16)

    hasbunallahuVeNimelVekil++

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles