原生js+html+css实现从表单（form）动态加数据到表格（table）

css部分

<style>
			.info{
				width: 150px;
				margin-bottom: 10px;
			}
			th{
				width: 100px;
				padding-left: 5px;
			}
			.title{
				height: 30px;
				background: purple;
				color: white;
			}
			td{
				height: 30px;
				padding-left: 5px;
			}
		</style>

html部分

<form action="#" method="post">
			<label for="brand">品牌：</label><input class="info" type="text" name="name" id="brand" placeholder="请输入品牌" /><br />
			<label for="model">型号：</label><input class="info" type="text" name="model" id="model" placeholder="请输入产品型号" /><br />
			<label for="parameter">参数：</label><input class="info" type="text" name="parameter" id="parameter" placeholder="请输入产品参数" /><br />
			<label for="price">价格：</label><input class="info" type="text" name="price" id="price" placeholder="请输入产品价格" /><br />
			<label for="country">国别：</label>
			<select style="width: 150px;margin-bottom: 10px;" name="country" id="country">
				<option value="">请选择</option>
				<option value="中国">中国</option>
				<option value="美国">美国</option>
				<option value="法国">法国</option>
				<option value="韩国">韩国</option>
				<option value="德国">德国</option>
				<option value="英国">英国</option>
			</select><br />
			<input type="button" id="btn" value="添加信息" />
		</form>
		<table border="1" cellspacing="0" cellpadding="0" style="text-align: left;margin-top: 20px;">
			<tr class="title">
				<th>品牌</th>
				<th>型号</th>
				<th>参数</th>
				<th>价格</th>
				<th>国别</th>
			</tr>
		</table>

js部分

<script>
			var btn = document.getElementById('btn');
			btn.onclick = function(){
				var brand = document.getElementById('brand').value;
				var model = document.getElementById('model').value;
				var parameter = document.getElementById('parameter').value;
				var price = document.getElementById('price').value;
				var country = document.getElementById('country').value;
				if(brand=="" | model=="" | parameter=="" | price== "" | country == ""){
					alert("输入的信息不完整，请输入完整信息");
				}else{
					var table = document.getElementsByTagName('table')[0];
					var tr = document.createElement('tr');
					tr.innerHTML = "<td>"+brand+"</td><td>"+model+"</td><td>"+parameter+"</td><td>"+price+"</td><td>"+country+"</td>";
					table.appendChild(tr);
				}
				
			}
		</script>

运行截图