Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужна помощь в реализации 2 (https://javascript.ru/forum/dom-window/47376-nuzhna-pomoshh-v-realizacii-2-a.html)

ArtemGavrilenko 21.05.2014 12:25

Нужна помощь в реализации 2
 
Добрый день! Это наверное наглость с моей стороны но все же. Нужна ваша помощь в следующем.
Есть массив
var goods = [
				{		
					name: {
						ru:'МТЗ',
						ua: 'МТЗ',
					},
					model: 'МТЗ 82.1',
					country: {
						ru:'Беларусь',
						ua: 'Білорусь',
					},
					price: '1.11',
					transmission : '18/4',
					engine: '59.6/81',
					wheel_formula: '4X4',
					images: 'img/belarus/mtz/МТЗ_82.1.jpeg',
				},
				{		
					name: {
						ru:'МТЗ',
						ua: 'МТЗ',
					},
					model: 'МТЗ 892',
					country: {
						ru:'Беларусь',
						ua: 'Білорусь',
					},
					price: '1.21',
					transmission: '18/4',
					engine: '65/88.7',
					wheel_formula: '4X4',
					images: 'img/belarus/mtz/МТЗ_892.jpeg',
				},
]

var percentage = {
				advance    : '30', //аванс
				insurance  : '3.1', //страховка
				commission : '1', //комиссия			
				}

и жалкое подобие функции
var _build = document.getElementById('_build').onclick = function () {
			
			var table_first = document.createElement('table');
			var tbody_first = document.createElement('tbody');				
			
			table_first.setAttribute('border', '1');
			table_first.setAttribute('color', '000');
		
			var tr1 = document.createElement('tr');
			var tr2 = document.createElement('tr');
			var tr3 = document.createElement('tr');
			
			tr1.innerHTML = '<td><b>Аванс</b></td><td> ' + percentage['advance'] + '%</td><td> 59 661 грн. </td>';
			tr2.innerHTML = '<td><b>Страховка (ежегодно)</b></td><td>' + percentage['insurance'] + '%</td><td> 6 165 грн. </td>';
			tr3.innerHTML = '<td><b>Коммисия</b></td><td>' + percentage['commission'] + '% разово</td><td>1 988,7</td>';
			
			document.getElementById('table-first').appendChild(tr1);
			document.getElementById('table-first').appendChild(tr2);
			document.getElementById('table-first').appendChild(tr3);
			
			var lizing_plateju = document.getElementById('lizing-plateju').innerHTML = "Лизинговые платежи";
			
			var table_last = document.createElement('table');
			var tbody = document.createElement('tbody');
			
			table_last.setAttribute('border', '1');
			table_last.setAttribute('color', '000');
			
			var tr4 = document.createElement('tr');
			var tr5 = document.createElement('tr');
			var tr6 = document.createElement('tr');	
			
			tr4.innerHTML = '<td> Лизинг на 12 месяцев </td><td> Лизинг на 24 месяца </td>';
			tr5.innerHTML = '<td> Ежемесячный платеж<br />составит - <b> 11 664 грн. </b></td><td> Ежемесячный платеж<br />составит - <b> 6 562 грн. </b></td>';
			tr6.innerHTML = '<td colspan="2">Возможен расчет адаптированого графика <br /> погашения с учетом сезонности бизнеса <td>';
			
			document.getElementById('table-last').appendChild(tr4);
			document.getElementById('table-last').appendChild(tr5);
			document.getElementById('table-last').appendChild(tr6);		
			
			var image = document.getElementById('image').innerHTML = '<img src="' + goods[0]['images'] + '"width=320px; height=320px" />';
			
			var model_traktor = document.getElementById('model_traktor').innerHTML = goods[0]['model'];
			
			var param = document.getElementById('param').innerHTML = "Параметры: ";
			
			
			var table_param = document.createElement('table');			
			var tbody = document.createElement('tbody');
			
			var tr7 = document.createElement('tr');
			var tr8 = document.createElement('tr');
			var tr9 = document.createElement('tr');			
			
			tr7.innerHTML = '<td><b>Трансмиссия </b>(вперед / назад)<td><td>.........<td><td>' + goods[0]['transmission'] + '</td>'	;		
			tr8.innerHTML = '<td><b>Двигатель </b>(мощность кВт/л.с.)<td><td>.........<td><td>' + goods[0]['engine'] + '</td>';			
			tr9.innerHTML = '<td><b>Колесная формула </b><td><td>.........<td><td>' + goods[0]['wheel_formula'] + '</td>';			
			
			document.getElementById('table-param').appendChild(tr7);
			document.getElementById('table-param').appendChild(tr8);
			document.getElementById('table-param').appendChild(tr9);							
		}


структура документа выглядит так

<select id="_make">
		  <option value="">...</option>
		</select>
		<select id="_model">
		  <option value="">...</option>
		</select>
		<select id="_country">
		  <option value="">...</option>
		</select>
		<input type="button" value="Показать характеристики" id="_build">
		<div id="build_img_tabl">
		<div id="table-first"></div>
		<h3 id="lizing-plateju"></h3>
		<div id="table-last"></div>
			<div id="blok_image">
				<div id="image"></div>	
					<h3 id="model_traktor"></h3>
					<h4 id="param"></h4>
					<div id="table-param"></div>
			</div>
		</div>


Первое что я не могу реализовать это если пользователь выберет из списка любой другой вариант, а не первый как я подставил, тоесть таблички должны заполнятся автоматически от результата выбора. Второе если нажимать на кнопку то будут создаваться новые элементы, а этого не нужно.

ArtemGavrilenko 21.05.2014 17:30

уже не актуальная тема!


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