用js实现汽车详细信息平添

汽车详细信息的种类是很多的，如果有一个汽车的网站需要填写上百辆或上千辆汽车的时候是很费时间和体力的。找到了一个车系查询的数据接口，从里面可以直接获取里面的详细参数，因此实现这个功能就简单的多了。

		<div class="param-container clearfix">
			<div class="c-param-in">
				<table class="param-table" width="100%" cellspacing="0" cellpadding="0" border="0">
					<tbody>
						<tr>
							<th colspan="2" name="基本参数">基本参数</th>
						</tr>
						<tr>
							<td class="td1" width="50%">厂商</td>
							<td class="td2" width="50%" data-car="manufacturers"></td>
						</tr>
						<tr>
							<td class="td1" width="50%">级别</td>
							<td class="td2" width="50%" data-car="level"></td>
						</tr>
						<tr>
							<td class="td1" width="50%">发动机</td>
							<td class="td2" width="50%" data-car="engine"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="c-param-in">
				<table class="param-table" width="100%" cellspacing="0" cellpadding="0" border="0">
					<tbody>
						<tr>
							<th colspan="2" name="车身">车身</th>
						</tr>
						<tr>
							<td class="td1" width="50%">长度</td>
							<td class="td2" width="50%" data-car="length"></td>
						</tr>
						<tr>
							<td class="td1" width="50%">宽度</td>
							<td class="td2" width="50%" data-car="width"></td>
						</tr>
						<tr>
							<td class="td1" width="50%">高度</td>
							<td class="td2" width="50%" data-car="height"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="c-param-in">
				<table class="param-table" width="100%" cellspacing="0" cellpadding="0" border="0">
					<tbody>
						<tr>
							<th colspan="2" name="车身">发动机</th>
						</tr>
						<tr>
							<td class="td1" width="50%">发动机型号</td>
							<td class="td2" width="50%" data-car="model"></td>
						</tr>
						<tr>
							<td class="td1" width="50%">排量(mL)</td>
							<td class="td2" width="50%" data-car="displacement"></td>
						</tr>
						<tr>
							<td class="td1" width="50%">进气形式</td>
							<td class="td2" width="50%" data-car="intakeForm"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

$(function() {
				$.getJSON("js/chexing.json", function(res) {
					var data = res.result;
					for(i in data) {
						var param = data[i];
						$("td[data-car]").each(function() {
							var item = $(this).data("car");
							$(this).html(param[item]);
						});
					}
				});
			});

 实现的思路就是判断td里面有没有data-car属性，进行变量，把他们每一个的data-cat的值取出来放在一个item变量里面,然后在把他的html设置成对象里面和item变量一样属性的值，就可以了。

最后实现了：