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

最新推荐文章于 2023-10-29 00:55:41 发布

iteye_8014

最新推荐文章于 2023-10-29 00:55:41 发布

阅读量617

点赞数

分类专栏： Javascript 文章标签： json

本文链接：https://blog.csdn.net/iteye_8014/article/details/82676646

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍如何利用JavaScript高效地处理汽车详细信息。通过调用车系查询接口获取汽车参数，利用DOM遍历选取带有data-car属性的td元素，提取data-cat值并转化为JSON对象，最终实现批量填充汽车详情页面的功能。

摘要由CSDN通过智能技术生成

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

		<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变量一样的值，就可以了。

最后实现了：