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>
运行截图