Создать таблицу средствами DOM
Вложений: 1
Как средствами 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 --> |
|
<!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>
стили самостоятельно |
Спасибо, я чуть-чуть подправил и вот как получилось.
<!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 -->
|
Neotwalker,
run [HTML run][/HTML] |
| Часовой пояс GMT +3, время: 21:25. |