完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
type="text/javascript"
></script>
<style>
button {
width: 60px
}
</style>
</head>
<body>
<h6>
总价：¥<span class="total"></span>      
折后总价：¥<span class="total-after"></span>
</h6>
<table border="1" cellpadding="10">
<tr>
<th>序号</th>
<th>分类名称</th>
<th>商品编码</th>
<th>商品名称</th>
<th>库存</th>
<th>单位</th>
<th>价格</th>
<th>
活动价格
<select onchange="changePrice(this.value)">
<option value="0.1">一折</option>
<option value="0.2">二折</option>
<option value="0.3">三折</option>
<option value="0.4">四折</option>
<option value="0.5">五折</option>
<option value="0.6">六折</option>
<option value="0.7">七折</option>
<option value="0.8">八折</option>
<option value="0.9">九折</option>
<option value="1" selected>无折扣</option>
</select>
</th>
<th>
操作
</th>
</tr>
</table>
<script type="text/javascript">
var initDatas = [
{
order: 304,
category: "护肤",
productCode: "SC20200001",
productName: "3525",
store: 111,
unit: 1,
price: 2,
price2: 2,
},
{
order: 136,
category: "防晒",
productCode: "SC8888",
productName: "防晒霜",
store: 100,
unit: 1,
price: 10,
price2: 10,
},
]
$(function () {
loadTableData(initDatas)
})
function loadTableData(dataList) {
var total = 0
var totalAfter = 0
$('.data-row').remove()
dataList.map(function (data, index) {
var row = $(
"<tr class='data-row'>" +
" <td align='center'>" + data.order + "</td>" +
" <td align='center'>" + data.category + "</td>" +
" <td align='center'>" + data.productCode + "</td>" +
" <td align='center'>" + data.productName + "</td>" +
" <td align='center'>" + data.store + "</td>" +
" <td align='center'>" + data.unit + "</td>" +
" <td align='center'>" + data.price + "</td>" +
" <td align='center'>" + data.price2 + "</td>" +
" <td align='center'><button onclick='deleteRow(" + index + ")'>删除</button></td>" +
"</tr>"
)
$("table").append(row)
total += data.price * data.store
totalAfter += data.price2 * data.store
})
var row = $(
"<tr class='add-row data-row'>" +
" <td align='center'><input type='text' style='width:50%'/></td>" +
" <td align='center'><input type='text' style='width:50%'/></td>" +
" <td align='center'><input type='text' style='width:50%'/></td>" +
" <td align='center'><input type='text' style='width:50%'/></td>" +
" <td align='center'><input type='number' style='width:50%'/></td>" +
" <td align='center'><input type='number' style='width:50%'/></td>" +
" <td align='center'><input type='number' style='width:50%'/></td>" +
" <td align='center'><i class='error' style='color:red'></i></td>" +
" <td align='center'><button onclick='addRow()'>新增</button></td>" +
"</tr>"
)
$("table").append(row)
$('.total').text(total.toFixed(2))
$('.total-after').text(totalAfter.toFixed(2))
}
/**
* 删除行
*/
function deleteRow(index) {
initDatas.splice(index, 1)
loadTableData(initDatas)
}
/**
* 新增行
*/
function addRow() {
var order = $(".add-row input").eq(0).val()
var category = $(".add-row input").eq(1).val()
var productCode = $(".add-row input").eq(2).val()
var productName = $(".add-row input").eq(3).val()
var store = $(".add-row input").eq(4).val()
var unit = $(".add-row input").eq(5).val()
var price = $(".add-row input").eq(6).val()
var price2 = price && price * $("select").val()
if (!order || !category || !productCode || !productName || !store || !unit || !price || !price2) {
$('.error').text('请输入完整信息!')
return
}
initDatas.push({
order: order,
category: category,
productCode: productCode,
productName: productName,
store: store,
unit: unit,
price: price,
price2: price2
})
loadTableData(initDatas)
}
/**
* 修改折扣
*/
function changePrice(act) {
initDatas.map(function(data) {
data.price2 = data.price * act
})
loadTableData(initDatas)
}
</script>
</body>
</html>
按照你的要求编写的用正则表达式判断输入0.10到1.00折扣正确与否的Javascript程序如下(注意要保证输入的小数保留两位小数)
<script type=text/javascript>
var str='0.12'
var regex=/^(0\.[1-9][0-9]|1\.00)$/
var result=regex.test(str)
if(result==true)
alert("输入折扣正确.")
else
alert("输入折扣错误.")
</script>
运行结果
输入折扣正确.
