当前位置：文江博客话题详情

通过单击按钮创建表

发布于 2024-12-06 07:16:54 字数 570 浏览 0 评论 0 原文

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

我需要创建一个表，每个 td 内都有一个 div，该表是通过单击按钮创建的...例如

请选择表中的行数

在此处输入图像描述

请选择表格中的列数。

在此处输入图像描述

结果：

所以如果你点击4 和 4 它将创建一个表 4 X 4。如果您单击 3 X 1，您将创建一个表 3 X 1，等等...

任何帮助将不胜感激！

这是我正在尝试做的一些事情。我还在看你们的所有评论！

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

我知道我需要添加Javascript如何通过id获取元素。 <代码>

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦等七年七年为一梦 2024-12-13 07:16:54

我将使用两种形式，一种用于顶行数字，一种用于第二行数字，其中每个数字都是用户输入的预定义值。

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

我建议使用 jquery 来实现这一点。

玩得开心...

回复收藏 0 原文

桜花祭 2024-12-13 07:16:54

你应该能够通过一些非常简单的 if 语句或 switch 来实现这一点

如果你有 2 个变量 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>");
}

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

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?

回复收藏 0 原文

优雅的叶子 2024-12-13 07:16:54

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

var HTML = '';

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

{ HTML += '';

for(var j = 0; j

{ HTML += '...';}

HTML += '';}

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

回复收藏 0 原文

居里长安 2024-12-13 07:16:54

这是经过测试的，值得注意的是，如果他们继续尝试一遍又一遍地构建表格，它不会处理它会不断添加列和行，但我会让你处理这个问题。 :)

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

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>

回复收藏 0 原文

~没有更多了~