Create table by clicking buttons_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-06 06:00 出处：网络

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

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

Create table by clicking buttons

Please select the开发者_JAVA技巧 number of columns in the table..

Create table by clicking buttons

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.

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...

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?

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;

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>