Question

当用户输入行数（<tr>标签数）和列数（<td>标签数）时，如何创建动态表？

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

HTML：

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

使用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);
  }
});

jQuery用户定义的动态表

1 个答案: