<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
tr{text-align: center;}
</style>
</head>
<body>
<form id="form1" method="post" style="text-align:center">
<option>添加产品</option><br />
<br />
名称:<input type="text" id="name" value="" />
数量:<input type="text" id="num" value="" />
单位:<input type="text" id="spec" value="" />
<br />
<br />
<br />
<input type="button" value="添加" id="btn1" />
<input type="button" value="保存" id="btn2" />
</form>
<br />
<br />
<hr color="black" /><br />
<br />
<table width="600" border="1" align="center" id="table1">
<thead>
<tr>
<td>名称</td>
<td>数量</td>
<td>单位</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var arr=[];
$("#btn1").click(function (){
if($("#name").val()=="" ||$("#num").val()=="" || $("#spec").val()=="" ){
alert('添加药品钧不能为空!');
return false
}else{}
var $tr=$("<tr></tr>");
var $bt=$("<td><a>删除</a></td>");
var $li1="<td>"+$("#name").val()+"</td>";
var $li2="<td>"+$("#num").val()+"</td>";
var $li3="<td>"+$("#spec").val()+"</td>";
$tr.append($li1,$li2,$li3,$bt);
$('#table1 tbody').append($tr);
$("a").attr("href","javascript:void(0)");
$("a").click(function(){
var p1=this.parentNode;
var p2=p1.parentNode;
$(p2).remove();
arr=[]
});
});
$("#btn2").click(function(){
for(var m=0;m < ($("tbody").find('tr').length);m++){
var s={
name:$("tbody").find('tr').eq(m).find('td').eq(0).text(),
num:$("tbody").find('tr').eq(m).find('td').eq(1).text(),
danwei:$("tbody").find('tr').eq(m).find('td').eq(2).text()
};
arr[m]=s
}
if(arr.length<=0){
alert('请先添加产品!')
return false
}
console.log(arr);
})
</script>