javascript - jQuery用户定义的动态表

Question

当用户输入行数(<tr>标签数)和列数(<td>标签数)时，如何制作动态表格？

我还需要确保每个 <td>标签有一个唯一的 ID。

HTML:

我有一个<div id=tabel> ... </div>在我的 html 代码中，我需要插入这个动态表。

Javascript:

var rows = content.rows, colums = content.columns, size = colums * rows, i;
$("tabel").append("<table>");

for (i = 0; i < size; i += 1) { 

// make table with dynamic <tr> and <td>

} 

伪代码或代码片段对我有很大帮助!

Answer 1

您需要一个嵌套的 for 循环。循环行，然后在每行内循环列:

https://jsfiddle.net/g80hzjgn/2/

var rows, cols, domRow, domCol, 
  table = $('#table'), 
  cellId = 0;

jQuery('#submit').click(function(){
  table.empty();
  rows = parseInt($('#row-input').val());
  cols = parseInt($('#col-input').val());

  for(var i = 0; i < rows; i++){
    domRow = $('<tr/>');
    for(var x = 0; x < cols; x++){
      domCol = $('<td/>',{
        'id': "cell-" + cellId++,
        'text': 'cell'
      });
      domRow.append(domCol);
    }
    table.append(domRow);
  }
});