Question

这就是我想要做的。希望它不是太难。

我需要在每个td中创建一个div，通过单击按钮创建一个div ...例如

请选择表格中的行数

enter image description here

请选择表格中的列数。

enter image description here

结果：

因此，如果您点击4和4，它将创建一个表4 X 4.如果您单击3 X 1，您将创建一个表3 X 1等...

非常感谢任何帮助!!

这是我努力工作的一个小问题。我还在查看你的所有评论！

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

我知道我需要在Javascript中添加如何通过id获取元素。

Answer 1

我会使用2个表单，1表示第一行数字，1表示第二行数字，其中每个数字是用户输入的预定义值。

使用javascript为每个表单分配每个号码的提交按钮，然后使用javascript获取结果并执行完成任务所需的代码/脚本。

我建议使用jquery。

玩得开心......

Answer 2

你应该可以通过一些非常简单的if语句或开关来实现这个目的

如果你有2个变量行和＆amp;列

//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>");
}

这里的语法非常非常伪造，这段代码不会起作用，但它可能会让你开始，一旦你拥有它，你实际上想要用表做什么？

Answer 3

使用javascript，有2个局部变量：width和height。在每个DIV中，有一个onclick函数，将该值赋给适当的变量，然后检查是否已经分配了两个变量（这样他们可以先点击高度或宽度）。如果两者都是，则在for循环中使用这些变量以在javascript中生成HTML代码：

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;

Answer 4

这是经过测试的，并且如果他们不断尝试一遍又一遍地构建表，那么它将无法处理它将继续添加cols和行但是我会让你处理它。：）

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

单击按钮创建表

4 个答案: