Jquery动态创建具有增量div id的表

Question

目前我正在使用 jquery 在单元格内动态创建一个带有 div 的表格。每个 div id 都是递增的。

我能够创建表格和 div，但是 div 被添加到所有单元格中，我想要的是第 1 行，只有 1 个 div 添加到第一个单元格，对于第 2 行，1 个 div 添加到第 2 行单元格 1 和单元格 2 等等。

当前输出如下:current
预期输出如下:expected

最终输出如下:final

代码如下

var table = $('<table>').addClass('number');
for(i=1; i<4; i++){
    var row = $('<tr>').addClass('row-hr');
	for (c=1; c<4; c++)
	{
		var col = $('<td>').addClass('cell');
		row.append(col);
		var dre = $('<div id="row'+i+'btn'+c+'">').addClass('red').text('j ' + c);
		col.append(dre);

	}
    table.append(row);
}


$('#here_table').append(table);

.number
{
	border: 1px solid black;
	border-spacing: 0px!important;
}


.cell
{
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

.cell:last-child
{
	border-right: 0px!important;
}

.red
{
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="here_table"></div>

Answer 1

只需用这个替换你的 JQuery 代码

var table = $('<table>').addClass('number');
for(i=1; i<4; i++){
    var row = $('<tr>').addClass('row-hr');
    for (c=1; c<4; c++)
    {
        var col = $('<td>').addClass('cell');
        row.append(col);
    if(c <= i ) {
        var dre = $('<div id="row'+i+'btn'+c+'">').addClass('red').text('j ' + c);
        col.append(dre);
    }

    }
    table.append(row);
}
$('#here_table').append(table);