Создать таблицу на jQuery

258

06 февраля 2020, 01:50

Я хочу использовать значения 2 полей ввода и сделать таблицу. <tr> должны быть равны значению, заданному в #inp1, а <td> - #inp2.

$("#create").click(function() { 
  var x = $("#inp1").val(); 
  var y = $("#inp2").val(); 
 
  $("#tab").remove(); 
   
  var table = $("<table id = 'tab'></div>"); 
 
  table.appendTo("body"); 
})

<input id="inp1" type="" name=""> 
<input id="inp2" type="" name=""> 
<button id="create">CREATE</button> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

$(document).on('click', '#create', function() { 
 
  $("#tab").remove() 
 
  var table = $('<table id="tab"/>') 
  var columnsCount = $('#inp1').val() 
  var rowsCount = $('#inp2').val() 
 
  for (var i = 0; i < rowsCount; i++) { 
    var row = $('<tr/>') 
 
    for (var j = 0; j < columnsCount; j++) { 
      var cell = $('<td/>') 
 
      cell.html('ячейка') 
      row.append(cell) 
    } 
 
    table.append(row) 
  } 
 
  table.appendTo('body') 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<input id="inp1" type="number" value="3" placeholder="Количество колонок" /> 
<input id="inp2" type="number" value="4" placeholder="Количество строк" /> 
<button id="create" type="button">CREATE</button>

Answer 2

document.querySelector("#button").addEventListener("click", () => {
let table           = document.createElement("table"),
    caption         = document.createElement("caption"),
    inputs          = document.querySelectorAll(".table");

table.setAttribute("border", "1");
caption.innerHTML = "TABLE";
for (let i = 0; i < inputs.length; i++) {
    let     tr            = document.createElement("tr");
    let     index         = document.createElement("td");
    let     value         = document.createElement("td");
    index.innerHTML = 'Input #' + (i+1);
    tr.appendChild(index);
    value.innerHTML = inputs[i].value;
    tr.appendChild(value);
    table.appendChild(tr);
}
table.appendChild(caption);
document.body.appendChild(table);
});

Вы можете иметь много входов. Просто добавьте один новый в HTML, и скрипт прочитает их все. Это лучше, чем читать только 2 входа.