用JS来创建table,解决不了添加删除的问题。 财富值67

2016-11-04 12:31发布


效果地址:链接描述
我写的几个情况问题是,
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(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>
友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
1条回答

element.insertBefore() 在指定的已有的子节点之前插入新节点。

一周热门 更多>