CODEWITHSUNDEEP
javascripthtmlbuttontabular
Irocmon
Irocmon

Reputation: 91

Create table by clicking buttons

Here's what I want to do. Hopefully it's not too hard.

I need to create a table with a div inside each td which is created by clicking buttons... for example

Please select the number of rows in the table

enter image description here

Please select the number of columns in the table..

enter image description here

Result:

So if you clicked on 4 and 4 it would create a table 4 X 4. If you clicked 3 X 1, you would create a table 3 X 1, etc...

Any help would be greatly appreciated!!

Here's a jfiddle of something I'm trying to get working. I'm still looking over all your comments!

http://jsfiddle.net/irocmon/7WD8v/

I know I need to add in the Javascript how to get the element by id.

Upvotes: 3

Views: 8892

Answers (4)

CBRRacer
CBRRacer

Reputation: 4659

This is tested and work of note it doesn't handle if they keep trying to build the tables over and over it will keep adding cols and rows but I will let you handle that. :)

    <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        var Rows = 0;
        var ColString = "";
        var TableBuilder;

        $(document).ready(function () {
            $("#Rows input").click(function () { Rows = $(this).val(); });
            $("#Cols input").click(buildCols);
            $("#Submit").click(CreateTable);
        });

        function buildCols() {
            for (i = 0; i < $(this).val(); i++) {
                ColString = ColString + "<td></td>";
            }
            return ColString;
        }
        function CreateTable() {
            if (Rows == 0 || ColString == "") {
                $("#PleaseSelect").removeClass("displayNone");
            }
            else {
                for (i = 0; i < Rows; i++) {
                    TableBuilder = TableBuilder + "<tr>" + ColString + "</tr>";
                }
                $("#table tbody").html(TableBuilder);
            }
        }

    </script>
    <style type="text/css">
      .displayNone { display: none; }
    </style>
    </head>
    <body>

        <table id="table" border="1">
             <tbody>
             </tbody>
         </table>

    <br><br>
    How many Rows?
    <div id="Rows">
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
    </div>
    <br />
    How Many Columns?
    <div id="Cols">
        <input type="button" value="1" >
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
    </div>
    <br />
    <div id="PleaseSelect" class="displayNone">Please select both a column number and a row number.</div>
    <input type="button" id="Submit" value="Build Table" />

    </body>
    </html>

Upvotes: 0

lightningmanic
lightningmanic

Reputation: 2165

Using javascript, have 2 local variables: width and height. Within each DIV, have an onclick function that assigns that value to the proper variable, then checks to see if both variables have been assigned (this way they can click on either height or width first). If both are, use these variables within a for loop to generate HTML code within javascript:

var HTML = '<table>';

for(var i = 0; i < height; i++)

{ HTML += '<tr>';

for(var j = 0; j < width; j++)

{ HTML += '<td>...</td>';}

HTML += '</tr>';}

document.getElementById('where_you_want_the_table').innerHTML = HTML;

Upvotes: 0

Ben
Ben

Reputation: 171

you should be able to achieve this with some pretty simple if statements or a switch

if you have 2 variables rows & columns

//loop for number of rows
for "x" number of rows{
 document.write("<tr>");
       if(columns > 0)
       {
        switch statement to output column
        1: document.write("<td></td>");
        2: document.write("<td></td><td></td>");
       }
 document.write("</tr>");
}

the syntax is very very psuedo here, this code wont work but it might get you started, what are you actually wanting to do with the table once you have it?

Upvotes: 0

Project V1
Project V1

Reputation: 357

I would use 2 forms, 1 for the top row of numbers and one for the second row of numbers, where each number is a predefined value of the user input.

Assign the submit button to each of the numbers using javascript for each form and from there grab the results with javascript and perform the code/script that is required to complete the task in mind.

I would recommend using jquery for this.

Have fun...

Upvotes: 2

Related Questions