<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-table.css">
<style type="text/css">
td,th {
text-align: center;
}
a {
text-decoration: none;
cursor: pointer;
}
th {
background-color: #459DF5;
color: white;
}
#table tr:nth-child(even) {
background: #fafafa;
}
#table th {
background: #efefef;
}
</style>
</head>
<body>
<script type="text/javascript" src="bower_components/bootstrap/js/jquery.min.1.12.4.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/js/bootstrap-table.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<h1>采购申请</h1>
<table class="table table-bordered" style="width: 975px;height: 100px; margin: 10px;">
<thead>
<tr>
<th>采购编号</th>
<th>物资名称</th>
<th>物资规格</th>
<th>物资数量</th>
<th>物资单位</th>
<th>物资金额</th>
<th>备注</th>
<th>申请人</th>
</tr>
</thead>
<tbody>
<tr>
<td>10001</td>
<td>华为P30</td>
<td>P30</td>
<td>件</td>
<td><input type="number" id="number" min="0" placeholder="0" class="form-control quantity-count"/></td>
<td><input type="text" id="price" placeholder="0" class="form-control quantity-count"/></td>
<td><input type="text" id="rea" readonly="readonly" class="form-control quantity-count"/></td>
<td>小明</td>
</tr>
</tbody>
</table>
<script>
//文本框输入事件,任何非正整数的输入都重置为0,parseFloat:该函数指定字符串中的首个字符是否是数字
$("#number,#price").keyup(function(){//keyup:键盘松开事件
//$("#number,#price").bind("input propertychange", function() {
if(isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val('');
//计算总价格
var numbe=$("#number").val();
var price=$("#price").val();
if(numbe>0 && price>0){
var sum=numbe*price;
$("#rea").val(sum);
}
if(numbe==''){
$("#rea").val('');
}
if(price==''){
$("#rea").val('');
}
});
</script>
</body>
</html>bootstrap只能输入数字，边输入边计算价格
猜你喜欢
转载自blog.csdn.net/weixin_44315761/article/details/89944695
今日推荐
周排行