完整代码：
<!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>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no">
<title>test</title>
<style type="text/css">
body{text-align: center}
.div1{
max-width: 1000px
margin: 50px auto
padding: 20px 0
background-color: #efa
}
</style>
</head>
<body>
<div class="div1">试试手气</div>
<button class="btn">点击抽奖</button>
<script type="text/javascript">
window.onload=function(){
// var form=document.forms[0]
var oDiv=document.querySelector(".div1")
var oBtn=document.querySelector(".btn")
var arr=[
{item:"美女一个",chances:20},
{item:"巴掌一个",chances:15},
{item:"嗜血珠",chances:20},
{item:"摄魂棒",chances:20},
{item:"诛仙剑",chances:25}
] //奖项对象
// 处理数据
var start_num=0
for(var i=0,len=arr.lengthi<leni++){
if(i!=0){
start_num+=arr[i-1]["chances"]
}
arr[i].range=[start_num,(start_num+arr[i]["chances"]-1)]
}
oBtn.onclick=function(){ //绑定事件
setFunc()
}
console.log(arr)
function setFunc(){
var num=parseInt(Math.random()*100)
for(var j=0,len=arr.lengthj<lenj++){
if(arr[j]["range"][0]<=num && arr[j]["range"][1]>=num){
oDiv.innerHTML="恭喜你获得"+arr[j]["item"]
}
}
}
}
</script>
</body>
</html>
写了个例子，可以参考一下思路
