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


效果地址:链接描述
我已经解决几个情况问题是,
假设一行大类有5行明细,怎么将一行大类包括5行明细的删掉?

现在最后的问题就是
点击“添加”再次点击“增加”明细一行,但是没有放在对应的一行大类里,一直放在底部增加几行。。不管添加多少行增加新一行,“增加”一行永远在底部。。。

<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.appendChildsInput1; sTr.appendChildsTd1; //规格明细 var sTd2 = document.createElement"td"; var sInput2 = document.createElement"input"; sInput2.setAttribute"type","text"; sInput2.setAttribute"placeholder","规格明细"; sTd2.appendChildsInput2; sTr.appendChildsTd2; //规格价格 var sTd3 = document.createElement"td"; var sInput3 = document.createElement"input"; sInput3.setAttribute"type","text"; sInput3.setAttribute"placeholder","规格价格"; sTd3.appendChildsInput3; sTr.appendChildsTd3; //库存数量 var sTd4 = document.createElement"td"; var sInput4 = document.createElement"input"; sInput4.setAttribute"type","text"; sInput4.setAttribute"placeholder","库存数量"; sTd4.appendChildsInput4; sTr.appendChildsTd4; //规格图片 var sTd5 = document.createElement"td"; var sFile = document.createElement"input"; sFile.setAttribute"type","file"; sTd5.appendChildsFile; sTr.appendChildsTd5; //操作方式 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.appendChildsOnclick1; sTd6.appendChildsOnclick; sTr.appendChildsTd6; //更新到tbody sTbody.appendChildsTr; sTble.appendChildsTbody;
}
//动态删除行
function deleteRow{ var sTable = document.getElementById"DetailInfo"; var sA = sTable.getElementsByTagName"a"; forvar 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 sTbody = sTable.getElementsByTagName"tbody"; var sTr = document.createElement"tr"; //规格名称 var sTd1 = document.createElement"td"; sTr.appendChildsTd1; //规格明细 var sTd2 = document.createElement"td"; var sInput2 = document.createElement"input"; sInput2.setAttribute"type","text"; sInput2.setAttribute"placeholder","规格明细"; sTd2.appendChildsInput2; sTr.appendChildsTd2; //规格价格 var sTd3 = document.createElement"td"; var sInput3 = document.createElement"input"; sInput3.setAttribute"type","text"; sInput3.setAttribute"placeholder","规格价格"; sTd3.appendChildsInput3; sTr.appendChildsTd3; //库存数量 var sTd4 = document.createElement"td"; var sInput4 = document.createElement"input"; sInput4.setAttribute"type","text"; sInput4.setAttribute"placeholder","库存数量"; sTd4.appendChildsInput4; sTr.appendChildsTd4; //规格图片 var sTd5 = document.createElement"td"; var sFile = document.createElement"input"; sFile.setAttribute"type","file"; sTd5.appendChildsFile; sTr.appendChildsTd5; //操作方式 var sTd6 = document.createElement"td"; var sOnclick = document.createElement"a"; sOnclick.href="javascript:;"; sOnclick.setAttribute"onclick","delspecitemRow"; sOnclick.innerText = "删除"; sTd6.appendChildsOnclick; sTr.appendChildsTd6; fori=0;i<sTbody.length;i++{ //更新到tr sTbody[i].appendChildsTr; }
}
//动态删除明细
function delspecitemRow { var sTable = document.getElementById"DetailInfo"; var sA = sTable.getElementsByTagName"a"; forvar i=0;i<sA.length;i++{ sA[i].addEventListener"click", function { var tableDodys = this.parentNode.parentNode.parentNode; tableDodys.remove; } }
}
</script>

根据你的代码,我改写点js
放个demo吧。
https://jsfiddle.net/zt6qf6ev/

appendChild也不是不行,逻辑没处理对。
其外,如果想复用,我也推荐楼上说的insertBefore方式来做特定位置的节点插入操作。

你别用appendChild用insertBefore

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

首先,梳理下你的业务逻辑,需要给”删除”和”增加明细”分别添加一个点击事件,然后这个点击事件又有不同的处理方式,即绑定不同的事件处理程序.
拿”删除”来说,你已经在HTML内绑定了一个点击事件”

sOnclick.setAttribute"onclick","deleteRow"; 这里deleteRow就是当点击删除时,需要进行的操作,就是删除当前你点击的这一行,所以在deleteRow函数里面执行的是找到这个元素的父节点,然后删除.
但是看你写的函数:
function deleteRow{ var sTable = document.getElementById"DetailInfo"; var sA = sTable.getElementsByTagName"a"; forvar i=0;i<sA.length;i++{ sA[i].addEventListener"click", function { var tableDodys = this.parentNode.parentNode.parentNode; tableDodys.remove; } }
} 又重新给所有的删除操作添加了一个事件,然后找到当前点击的那个,然后删除,在事件处理程序中绑定事件很奇怪,而且这里存在一个闭包的问题,导致只能删除最后一个.
应该让事件处理程序只用来处理事件,找到父节点,然后删除:
function deleteRow{ var sTable = document.getElementById"DetailInfo"; //事件对象兼容IE var event = event ? event : window.event; var that = event.target || event.srcElement; var row = that.parentNode.parentNode.parentNode; row.remove;
} 同理,增加明细,addspecitemRow执行的应该是,找到你点击的行,然后再这行下面插入一行,可以使用insertBefore,里面的程序应该和你的addRow里面一样,只是没有规格名称和增加明细;
里面的删除操作,也只是删除当前行,完全可以用上面的deleteRow,而不需要delspecitemRow,因为它们执行的目的是一样的,就是删除当前行.

最后,代码写的略冗余,可以尝试使用cloneNode函数,因为你这里重复的很多,JS里面其实有专门针对table的DOM节点操作的API,使用起来比较简洁,可以去了解一下;

发表评论

电子邮件地址不会被公开。 必填项已用*标注