Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Создание таблицы (https://javascript.ru/forum/jquery/74191-sozdanie-tablicy.html)

Retro_1477 20.06.2018 15:27
Создание таблицы
 
Как создать таблицу 10x10 с помощью jQuery?

Retro_1477 20.06.2018 15:29
внутри элемента div с id field1

ksa 20.06.2018 15:30
Цитата:
Сообщение от Retro_1477
Как создать таблицу 10x10 с помощью jQuery?
Можно просто воспользоваться методом .html()
https://jquery-docs.ru/html/#html2

Просто передав ему строку с тегами такой таблицы...

ksa 20.06.2018 15:31
Цитата:
Сообщение от Retro_1477
внутри элемента div с id field1
 
$('#field1').html(htmlText);

Где htmlText строка с нужными тегами таблицы...

Retro_1477 20.06.2018 15:35
можно как-нибудь через циклы?
Просто у меня огромная таблица и в ней табуляция с отступами

ksa 20.06.2018 15:35
Цитата:
Сообщение от Retro_1477
можно как-нибудь через циклы?
Разумеется можно! :yes:

ksa 20.06.2018 15:36
Цитата:
Сообщение от Retro_1477
у меня огромная таблица
10х10 это огромная таблица? :blink:

Retro_1477 20.06.2018 15:38
хех)

Retro_1477 20.06.2018 15:39
как сделать таблицу 10x10 внутри тега?

Retro_1477 20.06.2018 15:40
Вот мой код, но он не запускает цикл создания строк и столбцов 
document.getElementById('player1_field').innerHTML+='<table>';
for (var i=0; i<10; i++){
	document.getElementById('player1_field').innerHTML+='<tr>';
	for (var j=0; j<10; j++){
	document.getElementById('player1_field').innerHTML+='<td></td>';
}
	document.getElementById('player1_field').innerHTML+='</tr>';
}
document.getElementById('player1_field').innerHTML+='</table>';
}

ksa 20.06.2018 15:42
Цитата:
Сообщение от Retro_1477
Вот мой код
Нужно сначала сформировать строку, а потом менять свойство innerHTML нужного элемента... ;)

ksa 20.06.2018 15:47
Как вариант...

<div id='test'></div>
<script type='text/javascript'>
var str='<table border="1">';
for (var i=0; i<10; i++){
	str+='<tr>';
	for (var j=0; j<10; j++){
		str+='<td>'+i+'.'+j+'</td>';
	}
	str+='</tr>';
}
str+='</table>';
document.getElementById('test').innerHTML=str;
</script>

j0hnik 20.06.2018 15:49 
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
	var table = document.createElement('table');
	for(var i = 0; i<10; i++) 
		table.innerHTML += '<tr>'+('<td>1</td>'.repeat(10))+'</tr>';
		$('body').append(table);

	</script>
</body>

Retro_1477 20.06.2018 15:56
Спасибо за помощь

рони 20.06.2018 18:49
j0hnik,
:) 
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
	var table = document.createElement('table');
		table.innerHTML = ('<tr>'+('<td>1</td>'.repeat(10))+'</tr>').repeat(10);
		$('body').append(table);

	</script>
</body>

рони 20.06.2018 19:12
Создание таблицы jquery
 
Retro_1477,
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
td{
  width: 40px;
  height: 40px;
  border-top-left-radius:60px 70px;
  border-bottom-right-radius:60px 70px;
  border: 1px solid #000000;
  text-align: center;
  background-color: rgba(34, 139, 34, 1);
}
</style>
<title>Untitled</title><meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
var mytable = $('<table/>'), tr;
$.each(Array(100),function(i) {
    i % 10 || (tr = $('<tr/>').appendTo(mytable));
    $('<td/>').appendTo(tr);
});
$('body').append(mytable);
</script>
</body>
</html>

j0hnik 20.06.2018 23:44
рони,
Ок
автор цикл просил прост


Часовой пояс GMT +3, время: 12:32.