Создайте таблицу HTML из заданного числа с помощью JavaScript.

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

Вы можете заполнить ячейки с любым значением, которое вы любите.

См Fiddle

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

Кажется достаточно просто, замените 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); 
    } 
    } 
} 

here является рабочим демо

Если вы хотите стол, чтобы заменить каждый раз, когда prevoiusly вы должны опустошить контейнер перед добавлением новой таблицы.

использование

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

ЯШ:

$(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/