Jquery для динамического создания таблицы с приращением идентификатора div

В настоящее время я использую jquery для динамического создания таблицы с div внутри ячейки. Каждый идентификатор div будет инкрементным.

Я могу создать таблицу и div, но div добавляется во все ячейки, что я хотел, это для строки 1, только 1 div добавляется в первую ячейку, для строки 2 1 div добавляется в ячейку строки 2 1 и ячейка 2 и так далее.

Текущий вывод выглядит следующим образом: ток
Ожидаемый результат: ожидал

Окончательный вывод выглядит следующим образом: окончательный

Код приведен ниже

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>

jquery html css

14.03.2019 02:22

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

Извините, я забыл включить самую последнюю строку кода. Теперь проверьте результат.

— 14.03.2019 03:02

Привет Усман, снова нужен твой совет. Если я намерен сделать окончательный вывод, как показано в приведенном выше qns. Как я могу изменить код для его достижения?

— 14.03.2019 03:59

14.03.2019 02:32