javascript - 用JS来创建table,解决不了添加删除的问题。
本文介绍了javascript - 用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.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 sTbody = sTable.getElementsByTagName("tbody");
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.href="javascript:;";
sOnclick.setAttribute("onclick","delspecitemRow()");
sOnclick.innerText = "删除";
sTd6.appendChild(sOnclick);
sTr.appendChild(sTd6);
for(i=0;i<sTbody.length;i++){
//更新到tr
sTbody[i].appendChild(sTr);
}
}
//动态删除明细
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>
解决方案
根据你的代码,我改写点js
放个demo吧。
https://jsfiddle.net/zt6qf6ev/
appendChild也不是不行,逻辑没处理对。
其外,如果想复用,我也推荐楼上说的insertBefore方式来做特定位置的节点插入操作。
这篇关于javascript - 用JS来创建table,解决不了添加删除的问题。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文