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

jQuery动态创建具有增量div ID的表

1 个答案: