用JS来创建table,解决不了添加删除的问题。？

效果地址：链接描述
我写的几个情况问题是，
1、点击“添加”再次点击“增加”明细一行，但是没有放在对应的一行大类里，一直放在底部增加几行。。
2、假设一行大类有5行明细，怎么将一行大类包括5行明细的删掉？

我的思路方法是
规格大类一行：tbodytfoot数组在一起的删除
明细小类一行：多带带删除

<style> .table-condensed{width:100%}.table-condensed thead{background:#F5F5F5}.table-condensed thead th{font-weight:100;border:1px solid #eee;padding:4px}.table-condensed tbody tr{text-align:center}.table-condensed tbody td{padding:4px;border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee}.table-condensed tbody td input{width:150px!important;border:0!important;background:#fff!important;padding:0!important;text-align:center}.table-condensed tfoot tr{text-align:center}.table-condensed tfoot td{padding:4px;border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee}.table-condensed tfoot td input{width:150px!important;border:0!important;background:#fff!important;padding:0!important;text-align:center}.table-condensed a{padding:0 10px}.limit{display:none} </style> <table id="DetailInfo" class="table-condensed" cellspacing="0" cellpadding="2" border="0"> <thead> <tr> <th>规格名称</th> <th>规格明细</th> <th>规格价格</th> <th>库存数量</th> <th>规格图片</th> <th style="width: 140px;">操作方式</th> </tr> </thead> </table> <a href="javascript:;" onclick="addRow()" style="float: left;padding: 4px 15px;background: #1863af;border-radius: 2px;margin: 10px 0;width: 100%;text-align: center;box-sizing: border-box;color: #fff;font-size: 14px;">添加</a>

<script> //动态添加行 function addRow(){ var sTble = document.getElementById("DetailInfo"); var sTbody = document.createElement("tbody"); var sTr = document.createElement("tr"); //规格名称 var sTd1 = document.createElement("td"); var sInput1 = document.createElement("input"); sInput1.setAttribute("type","text"); sInput1.setAttribute("placeholder","规格名称"); sTd1.appendChild(sInput1); sTr.appendChild(sTd1); //规格明细 var sTd2 = document.createElement("td"); var sInput2 = document.createElement("input"); sInput2.setAttribute("type","text"); sInput2.setAttribute("placeholder","规格明细"); sTd2.appendChild(sInput2); sTr.appendChild(sTd2); //规格价格 var sTd3 = document.createElement("td"); var sInput3 = document.createElement("input"); sInput3.setAttribute("type","text"); sInput3.setAttribute("placeholder","规格价格"); sTd3.appendChild(sInput3); sTr.appendChild(sTd3); //库存数量 var sTd4 = document.createElement("td"); var sInput4 = document.createElement("input"); sInput4.setAttribute("type","text"); sInput4.setAttribute("placeholder","库存数量"); sTd4.appendChild(sInput4); sTr.appendChild(sTd4); //规格图片 var sTd5 = document.createElement("td"); var sFile = document.createElement("input"); sFile.setAttribute("type","file"); sTd5.appendChild(sFile); sTr.appendChild(sTd5); //操作方式 var sTd6 = document.createElement("td"); var sOnclick = document.createElement("a"); var sOnclick1 = document.createElement("a"); sOnclick1.href="javascript:;"; sOnclick1.setAttribute("onclick","addspecitemRow()"); sOnclick1.innerText = "增加明细"; sOnclick.href="javascript:;"; sOnclick.setAttribute("onclick","deleteRow()"); sOnclick.innerText = "删除"; sTd6.appendChild(sOnclick1); sTd6.appendChild(sOnclick); sTr.appendChild(sTd6); //更新到tbody sTbody.appendChild(sTr); sTble.appendChild(sTbody); } //动态删除行 function deleteRow(){ var sTable = document.getElementById("DetailInfo"); var sA = sTable.getElementsByTagName("a"); for(var i=0;i<sA.length;i++){ sA[i].addEventListener("click", function() { var tableDodys = this.parentNode.parentNode.parentNode; tableDodys.remove(); }) } } //动态增加明细 function addspecitemRow() { var sTable = document.getElementById("DetailInfo"); var sTfoot = document.createElement("tfoot"); var sTr = document.createElement("tr"); //规格名称 var sTd1 = document.createElement("td"); sTr.appendChild(sTd1); //规格明细 var sTd2 = document.createElement("td"); var sInput2 = document.createElement("input"); sInput2.setAttribute("type","text"); sInput2.setAttribute("placeholder","规格明细"); sTd2.appendChild(sInput2); sTr.appendChild(sTd2); //规格价格 var sTd3 = document.createElement("td"); var sInput3 = document.createElement("input"); sInput3.setAttribute("type","text"); sInput3.setAttribute("placeholder","规格价格"); sTd3.appendChild(sInput3); sTr.appendChild(sTd3); //库存数量 var sTd4 = document.createElement("td"); var sInput4 = document.createElement("input"); sInput4.setAttribute("type","text"); sInput4.setAttribute("placeholder","库存数量"); sTd4.appendChild(sInput4); sTr.appendChild(sTd4); //规格图片 var sTd5 = document.createElement("td"); var sFile = document.createElement("input"); sFile.setAttribute("type","file"); sTd5.appendChild(sFile); sTr.appendChild(sTd5); //操作方式 var sTd6 = document.createElement("td"); var sOnclick = document.createElement("a"); sOnclick.setAttribute("onclick","delspecitemRow()"); sOnclick.innerText = "删除"; sTd6.appendChild优艾设计网_Photoshop问答(sOnclick); sTr.appendChild(sTd6); //更新到tbody sTfoot.appendChild(sTr); sTable.appendChild(sTfoot); } //动态删除明细 function delspecitemRow() { var sTable = document.getElementById("DetailInfo"); var sA = sTable.getElementsByTagName("a"); for(var i=0;i<sA.length;i++){ sA[i].addEventListener("click", function() { var tableDodys = this.parentNode.parentNode.parentNode; tableDodys.remove(); }) } } </script>

---

zjsun 2022-06-15 16:39

eleme优艾设计网_设计百科nt.insertBefore() 在指定的已有的子节点之前插入新节点。

---