javascript - 用JS来创建table,解决不了添加删除的问题。
黄舟
黄舟 2017-04-10 17:41:56
[JavaScript讨论组]


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

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


规格名称 规格明细 规格价格 库存数量 规格图片 操作方式
添加
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(3)
PHP中文网

根据你的代码,我改写点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");
    for(var 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,使用起来比较简洁,可以去了解一下;

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号