使用JavaScript從給定的數字生成HTML表

Question

以前，我想到了一種情況，該問題解決了我的問題，即根據給定的單詞生成表格並對角打印。

但是，這一次，我需要根據給定的數值使用JavaScript（無jQuery或其他替代方法）生成一個表。 給定的值確定列數和行數（總是相等）。

示例：我給數字輸入一個數字8，JavaScript生成一個具有8個列和8行的表格。

該值必須為數字，因此如果給定值為NaN，則運行應中斷。

這是我嘗試修改的先前代碼，以實現此目的，但不幸失敗了：

 function generateTable() { var $c = document.getElementById("container"); var $table = document.createElement('table'); var $tbody = document.createElement('tbody'); var word = document.getElementById('word').value.split(""); $c.appendChild($table); $table.appendChild($tbody); for (var i=0, l=word.length; i<l; i++) { var $tr = document.createElement('tr'); $tbody.appendChild($tr); for (var j=0, jl=word.length; j<jl; j++) { var $td = document.createElement('td'); $td.appendChild(document.createTextNode(i==j ? word[i] : "-")); $tr.appendChild($td); } } } 

 <textarea id="word"></textarea><br> <button id="generate" onclick="generateTable();">Generate</button> <div id="container"></div> 

是的，可以處理給定的單詞並按對角線打印它，我嘗試更改一些值並影響其生成表的方式，但設法將整個內容弄亂了。 這就是為什么不發布我修改過的代碼，而是在我開始對其進行修改的地方發布代碼的原因。

Answer 1

這是我在沒有jQuery的情況下想到的：

HTML：

<h3>Create your table!</h3>
<input type="text" id="trc" />
<button id="create">Create</button>
<div id="table"></div>

JavaScript的：

document.getElementById("create").onclick=function() {
    var trtd = document.getElementById("trc").value;
    if(isNaN(trtd) || trtd < 1) {
        document.getElementById("table").innerHTML = "The given value must be a number!";
    }
    else {
        var table = "<table>";
        for(i = 0; i < trtd; i++) {
            table += "<tr>";
            for(j = 0; j < trtd; j++) {
                table += "<td>Cell</td>";
            }
            table += "</tr>";
        }
        table += "</table>";
        document.getElementById("table").innerHTML = table;
    }
}

您可以用任何您喜歡的值填充單元格。

見小提琴

Answer 2

您可以只運行兩個內部循環，根據輸入情況適當地附加行和單元格。

 var input = document.getElementById('input'), output = document.getElementById('output'), btnGen = document.getElementById('btnGen'); btnGen.addEventListener('click', function() { var table; output.innerHTML = ''; if (table = generateTable(input.value)) { output.appendChild(table); } else { output.textContent = 'Invalid user input'; } }); function generateTable(n) { if (typeof n !== 'number' && isNaN(n) || +n === 0) { return false; } var table = document.createElement('table'), size = +n; for (var i = 0; i < n; i++) { var tr = document.createElement('tr'); for (var j = 0; j < n; j++) { var td = document.createElement('td'); td.textContent = i + "," + j tr.appendChild(td); } table.appendChild(tr); } output.appendChild(table); return table; } 

 <input id="input"></input> <button id="btnGen">Generate</button> <div id="output"></div> 

Answer 3

似乎很簡單，只需將for循環中的l = word.length替換為文本區域中給出的實際值...在stackoverflow上有很多問題需要處理JavaScript中的數字...

Answer 4

你可以做到這一點

 function createTable() { var num_rows = document.getElementById('int').value; var num_cols = num_rows; var theader = '<table border="1">\\n'; var tbody = ''; for( var i=0; i<num_rows;i++) { tbody += '<tr>'; for( var j=0; j<num_cols;j++) { tbody += '<td style="width:30px;height:20px">'; tbody += '</td>' } tbody += '</tr>\\n'; } var tfooter = '</table>'; document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; } 

 <label>Integer: <input type="text" name="rows" id="int"/></label><br /> <div id="wrapper"></div> <input name="generate" type="button" value="Create Table!" onclick='createTable();'/> 

Answer 5

此代碼應該可以解決您的問題

function generateTable() {
  var $c = document.getElementById("container");
  var $table = document.createElement('table');
  var $tbody = document.createElement('tbody');
  if(isNaN(document.getElementById('word').value)) return;
  var l = parseInt(document.getElementById('word').value);
  $c.appendChild($table);
  $table.appendChild($tbody);
  for (var i=0; i < l; i++) {
    var $tr = document.createElement('tr');
    $tbody.appendChild($tr);
    for (var j=0;  j < l; j++) {
      var $td = document.createElement('td');
      $td.appendChild(document.createTextNode(i==j ? l : "-"));
      $tr.appendChild($td);
    } 
  }
}

這是工作演示

如果您希望每次更換表時都應先清空容器，然后再附加新表。

采用

$c.innerHTML="";

之前

$c.appendChild($table);

Answer 6

我不確定我的答案是否足夠好。 我的英語太爛了，也許我聽錯了您的問題。

HTML：

<div id="container">
    <input type="text" id="num_input" />
    <input type="button" id="generator" value="press on me">

    <div id="table_container"></div>
</div>

JS：

$(function(){

    $("#generator").click(function(){

        val = $("#num_input").val();
        if(!isNaN(val)){

            $("#table_container").html("");
            $("#table_container").append("<table>");

            for (i=0; i<val; i++) {
                $("#table_container table").append("<tr id='"+i+"'>");

                for (j=0; j<val; j++){
                    $("#table_container tr#"+i).append("<td>"+i+"-"+j+"</td>");
                }
                $("#table_container").append("</tr>");
            }
            $("#table_container").append("</table>");
        }
    })    
})

工作鏈接： http : //jsfiddle.net/thisizmonster/jgf25ach/