通過單擊按鈕創建表格

這是我想要做的。希望它不是太難。通過單擊按鈕創建表格

我需要創建一個表，每個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

通過單擊按鈕創建表格

回答

相關問題