通过单击按钮创建表格

这是我想要做的。希望它不是太难。通过单击按钮创建表格

我需要创建一个表，每个TD内一个div，通过点击按钮...例如

请在下表

enter image description here

选择的行数创建

请选择表中的列数..

enter image description here

结果：

所以，如果你点击了4,4它将创建一个表4 X 4，如果你点击了3×1，您将创建一个表3 X 1，等...

任何帮助将不胜感激！

以下是我正在努力工作的东西。我仍在查看您的所有评论！

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

我知道我需要在加入JavaScript如何获得由ID的元素。

来源

2011-09-21 Irocmon

不要指望任何人为你做所有的工作。你遇到哪些问题？ –

你卡在哪里？攻击的基本向量是将事件处理程序绑定到按钮，并且当两个选项都选择一个值时，生成表格。或者添加一个“创建”按钮，并根据选定的值点击时创建表格。（这实际上会为前端工程师提出一个很好的面试问题） – Erik

我不想让别人为我做所有的工作。除了这部分，我有一切工作。现在我只是使用html作为表格，但我需要能够拥有大约30种不同的表格大小。我尝试添加和删除列和多个表之间切换，我似乎每次都遇到问题。这是我能想到的最好办法。我只是不确定从哪里开始。看起来我在这里有很多帮助我开始，尽管......谢谢！ – Irocmon

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

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

我会推荐使用jquery。

玩得开心......

来源

2011-09-21 15:31:25

你应该能够用一些漂亮的if语句或简单的开关

实现这一目标，如果你有2个变量行&列

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

语法在这里非常非常实用，这段代码不会工作，但它可能会让你开始，一旦你拥有它，你究竟想要做什么？

来源

2011-09-21 15:35:24 Ben

使用javascript，有2个局部变量：宽度和高度。在每个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;

来源

2011-09-21 15:37:08 lightningmanic

这是测试，并记下工作，如果他们一直试图一遍又一遍它打造的表将继续增加cols和rows，但我会让你处理，它不处理。 :)

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

来源

2011-09-21 15:37:43 CBRRacer

通过单击按钮创建表格

回答

相关问题