16.05.2014, 16:16
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 37
|
|
|
Вывод информации из массива в таблицу
Добрый день!
Помогите с выводом информации из массива в таблицу, не могу добавить в 0-ю строку var rows.getElementsByTagName('tr')[0].innerHTML = '<tr><td>Марка техники<td><td>Модель техники<td><td>Страна производитель<td><td>Цена<td></tr>';
И как на место i*j подставить значению из массива
var goods = [
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.11',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '892',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.21',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '920',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.31',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '92П',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.22',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '922.3',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.42',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '952.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.42',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1025.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.22',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1221.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.24',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1523.В',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.16',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '2.16',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '892',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '1.85',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1221.2',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '1.19',
},
]
var countGoods = goods.length;
var table = document.createElement('table');
table.setAttribute('border', '1');
table.setAttribute('color', '000');
table.setAttribute('width','500');
table.setAttribute('height', '300');
var tbody = document.createElement('tbody');
for(var i = 0; i < countGoods; i++){
var tr = document.createElement('tr');
var rows.getElementsByTagName('tr')[0].innerHTML = '<tr><td>Марка техники<td><td>Модель техники<td><td>Страна производитель<td><td>Цена<td></tr>';
for (var j = 0; j < 4; j++) {
var td = document.createElement('td');
td.innerHTML = i*j;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.getElementById('table-lizing-traktor').appendChild(table);
}
|
|
16.05.2014, 16:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
ArtemGavrilenko,
то есть вы хотите строку в строку вложить?
|
|
16.05.2014, 16:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от ArtemGavrilenko
|
|
var rows.getElementsByTagName
|
что есть rows и зачем var |
|
16.05.2014, 16:38
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 37
|
|
|
чтобы в первой строке было Марка техники Модель техники Страна производитель Цена, а остальных данные из массива
добился "чтобы в первой строке было Марка техники Модель техники Страна производитель Цена", а каким образом можно занести данные из массива в таблицу?
Последний раз редактировалось ArtemGavrilenko, 16.05.2014 в 16:50.
|
|
16.05.2014, 17:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
ArtemGavrilenko,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div id="table-lizing-traktor"></div>
<script>
var goods = [
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.11',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '892',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.21',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '920',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.31',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '92П',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.22',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '922.3',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.42',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '952.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.42',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1025.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.22',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1221.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.24',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1523.В',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.16',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '2.16',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '892',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '1.85',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1221.2',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '1.19',
},
]
var countGoods = goods.length;
var table = document.createElement('table');
table.setAttribute('border', '1');
table.setAttribute('color', '000');
table.setAttribute('width','500');
table.setAttribute('height', '300');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.innerHTML = '<td>Марка техники</td><td>Модель техники</td><td>Страна производитель</td><td>Цена</td>';
tbody.appendChild(tr);
var items = ['name','model','country','price'], country = 'ru';
for(var i = 0; i < countGoods; i++){
var tr = document.createElement('tr');
for (var j = 0; j < 4; j++) {
var td = document.createElement('td');
var item = goods[i][items[j]];
td.innerHTML = item[country] ? item[country] : item;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.getElementById('table-lizing-traktor').appendChild(table);
</script>
</body>
</html>
|
|
16.05.2014, 17:17
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 37
|
|
|
Благодарю! Мне еще учится и учиться
|
|
29.06.2017, 01:32
|
|
Кандидат Javascript-наук
|
|
Регистрация: 21.05.2013
Сообщений: 131
|
|
|
рони, Дельный пример)
А не мог бы ты написать точно такое же только на jq ?
|
|
29.06.2017, 02:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
создание таблицы из обьекта данных на jquery
zoOmer,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="table-lizing-traktor"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var goods = [
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.11',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '892',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.21',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '920',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.31',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '92П',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.22',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '922.3',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.42',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '952.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.42',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1025.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.22',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1221.2',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.24',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1523.В',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '2.16',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '2.16',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '892',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '1.85',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '1221.2',
country: {
ru:'Украина',
ua: 'Україна',
},
price: '1.19',
},
]
var items = ["name", "model", "country", "price"],
country = "ru",
table = $("<table/>", {
attr: {
border: "1",
width: "500"
}
}),
tr = $("<tr>");
tr.clone().html("<td>Марка техники</td><td>Модель техники</td><td>Страна производитель</td><td>Цена</td>").appendTo(table);
goods.forEach(function(b) {
var c = tr.clone().appendTo(table);
items.forEach(function(a) {
a = b[a];
a = a[country] || a;
$("<td>", {
html: a
}).appendTo(c)
})
});
$("#table-lizing-traktor").append(table);
})
</script>
</body>
</html>
|
|
|
|
