Форум

Neotwalker · #1 (**permalink**) 05.04.2018, 14:50

Как средствами DOM создать таблицу и занести туда готовый массив как показано на рисунке?

<!DOCTYPE HTML>
<!-- Do not remove and do not change this string -->
<html>
<head>
<meta charset=utf-8>

<style>
  .div1{
	background-color: blue;
	width: 50%;
	height: 50%;
	text-align: center;
	}
</style>

<script>
var tableObj = document.createElement('table');
var z=new Array(
  new Array("Иванов",3),
  new Array("Петров",4),
  new Array("Сидоров",5),
  new Array("Романов",3),
  new Array("Македонский",2),
  new Array("Барбаросса",4),
  new Array("Цезарь",5),
  new Array("Бендер",5)
);
</script>

</head>
<body>
<div class="div1" id="div1">
</div>
<table border='1'>

</table>
</body>
</html>
<!-- Do not remove and do not change this string -->

Nexus · #2 (**permalink**) 05.04.2018, 15:03

https://stackoverflow.com/a/15164958

j0hnik · #3 (**permalink**) 05.04.2018, 15:05

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div></div>
	<script>
var tableObj = document.createElement('table'),
z=new Array(
  new Array("Иванов",3),
  new Array("Петров",4),
  new Array("Сидоров",5),
  new Array("Романов",3),
  new Array("Македонский",2),
  new Array("Барбаросса",4),
  new Array("Цезарь",5),
  new Array("Бендер",5)
);
tableObj.innerHTML = '<tr><td>Фамилия</td><td>Оценка</td></tr>'
for(var i = 0; i<z.length; i++) tableObj.innerHTML +='<tr><td>'+z[i][0]+'</td><td>'+z[i][1]+'</td></tr>'
document.querySelector('div').appendChild(tableObj);
</script>
</body>
</html>

стили самостоятельно

Neotwalker · #4 (**permalink**) 06.04.2018, 12:42

Спасибо, я чуть-чуть подправил и вот как получилось.

<!DOCTYPE HTML>
<!-- Do not remove and do not change this string -->
<html>
<head>
<meta charset=utf-8>

<style>
  .div1{
	width: 300px;
	margin: 0 auto;
	}
table{
	border: 1px solid black; 
	width: 300px;
	}
td:nth-child(n+1){
	border: 1px solid black; 
	text-align: left; 
	background-color: #DCDCDC;
	}
td:nth-child(2n){text-align: right;}
th{
	border: 1px solid black;
	background-color: #66CDAA; 
	text-align: left;
	}
.t1{text-align: right;}
</style>

<script>
var tableObj = document.createElement('table');
var z=new Array(
  new Array("Иванов",3),
  new Array("Петров",4),
  new Array("Сидоров",5),
  new Array("Романов",3),
  new Array("Македонский",2),
  new Array("Барбаросса",4),
  new Array("Цезарь",5),
  new Array("Бендер",5)
);
</script>

</head>
<body>
<div class="div1" id="div1">
</div>
<script>
	tableObj.innerHTML = '<tr><th>Фамилия</td><th>Оценка</td></tr>'
	for(var i = 0; i<z.length; i++) tableObj.innerHTML +='<tr><td>'+z[i][0]+'</td><td>'+z[i][1]+'</td></tr>'
	document.querySelector('div').appendChild(tableObj);
</script>
</body>
</html>
<!-- Do not remove and do not change this string -->

рони · #5 (**permalink**) 06.04.2018, 13:14

Neotwalker,
run

[HTML run][/HTML]

Форум

Справочник

Discord чат

Курсы javascript