Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вывод информации из массива в таблицу (https://javascript.ru/forum/dom-window/47265-vyvod-informacii-iz-massiva-v-tablicu.html)

ArtemGavrilenko 16.05.2014 16:16
Вывод информации из массива в таблицу
 
Добрый день!
Помогите с выводом информации из массива в таблицу, не могу добавить в 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
ArtemGavrilenko,
то есть вы хотите строку в строку вложить?

рони 16.05.2014 16:23
Цитата:
Сообщение от ArtemGavrilenko
var rows.getElementsByTagName
что есть rows и зачем var

ArtemGavrilenko 16.05.2014 16:38
чтобы в первой строке было Марка техники Модель техники Страна производитель Цена, а остальных данные из массива
добился "чтобы в первой строке было Марка техники Модель техники Страна производитель Цена", а каким образом можно занести данные из массива в таблицу?

рони 16.05.2014 17:10
ArtemGavrilenko,
:cray: 
<!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>

ArtemGavrilenko 16.05.2014 17:17
Благодарю! Мне еще учится и учиться

zoOmer 29.06.2017 01:32
рони, Дельный пример)

А не мог бы ты написать точно такое же только на jq ?

рони 29.06.2017 02:38
создание таблицы из обьекта данных на 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>


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