批量添加产品js

最新推荐文章于 2023-07-13 10:55:30 发布

原创最新推荐文章于 2023-07-13 10:55:30 发布 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#产品 #input #button #function #div #action

web技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用JavaScript在网页中实现批量添加产品的功能。通过创建动态DOM元素，添加输入框和删除按钮，允许用户在订单系统中添加产品条目，并能删除已添加的条目。代码示例详细展示了如何绑定事件和更新序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做个订单系统时，遇到要批量添加产品，找了js代码，贴出了分享一下：

<body>
<script type="text/javascript">
var count = 0;
function AddProduct(num){
count += 1;

//定义载入数据容器
var ProductBox = document.getElementById("ProductBox");
var div = document.createElement("div");
var countTxt = document.createTextNode("序号"+count);

//消费条目名称
var inputTxt = document.createElement("input");
inputTxt.type = "text";
inputTxt.value = +count;
inputTxt.name = "wa";
inputTxt.id = "wa"+count;
inputTxt.onclick = function() {
    var tempStr11=this.id;
    var tempStr12=tempStr11.slice(2); //从第3个字符开始截取
    SelectProduct(tempStr12); //选择消费条目
}

//条目单价
var inputTxta = document.createElement("input");
inputTxta.type = "text";
inputTxta.value = document.getElementById("a"+num).value;
inputTxta.name = "wb"+count;

//条目数量
var inputTxtaa = document.createElement("input");
inputTxtaa.type = "text";
inputTxtaa.value = document.getElementById("aa"+num).value;
inputTxtaa.name = "wc"+count;

//删除指定行数据
var btnDel = document.createElement("input");
btnDel.type = "button";
btnDel.value = "删除";
btnDel.onclick = function()
{
this.parentNode.parentNode.removeChild(this.parentNode);

var n = ProductBox.getElementsByTagName("div");
for(var k=0; k<n.length; k++)
{
    n[k].firstChild.nodeValue = "序号"+(k+1);
}
    count -= 1;
}

//动态插入每行数据标签
div.appendChild(countTxt);
div.appendChild(inputTxt);
div.appendChild(inputTxta);
div.appendChild(inputTxtaa);
div.appendChild(btnDel);
ProductBox.appendChild(div);
}
</script>
<form name="form" action="saveadd.asp"   method="post">
<input type="button" name="add" id="add" value="添加条目" onclick="AddProduct(1);" />
<div id="ProductBox">
<input name="a1" type="hidden" id="a1" value="" />
<input name="aa1" type="hidden" id="aa1" value="666" />
<input name="aaa1" type="hidden" id="aaa1" value="" />
<input name="aaaa1" type="hidden" id="aaaa1" value="" />
</div>
<input type="submit" name="button" id="button" value="提交" />
</form>
</body>