Question

我正在尝试这个项目100％Javascript，没有任何JQuery。

我有一个十列的表格，当用户＆＃34; Tabbs out＆＃34;时，我想添加一个新行。表的最后一行的选择框（类selectprod），无论它增大或缩小的大小。我不希望每个select.selectprod都有这个keydown属性，只是动态表最后一行的select.selectprod。

问题是，当我添加addEventListener（我认为这样做的唯一方法，这可能是错误的）到最后一行，然后添加一个新行时，我必须从上一行中删除EventListener并添加它到最后一排。不知道该怎么做。

在JQuery中，无论使用以下内容添加和删除多少行，我都可以收听最后一行的第4列单元格：

    function addRowWithTab() {
        alert('is it listening');
        $(table).find("tr:not(.noedit):last select.selectprod").on("keydown",function(e) {
            if(e.keyCode == 9) {
              alert('tabbed !!! ');
                addRow();
            }
        });
    }

但我如何模拟

 $(table).find("tr:not(.noedit):last select.selectprod").on("keydown",function(e) {....

使用Javascript？ 到目前为止，我有以下看似错误的方式甚至开始考虑它。

    function addListener(){
        var oldlength = document.getElementById("table1").getElementsByTagName('select').length;
        var oldlength = oldlength-1;
        var el = document.getElementById("item_" + oldlength);
        el.removeEventListener("click", createRow, false);

        var length = document.getElementById("table1").getElementsByTagName('select').length;

        var el = document.getElementById("item_" + length);
        el.addEventListener("click", createRow, false);
    }

这让我疯了！我是否应该尝试将所有select.selectprods添加到节点列表中，并且有一个函数以某种方式总是监听列表的最后一个，即使该列表正在扩展和收缩？请帮忙！

Answer 1

找出一个好的解决方法：它遍历所有选择元素，擦除事件监听器直到最后一次选择并添加事件监听器。耶。

    function onTab(e){
        //alert("hi" + e);
        if(e.keyCode === 9) {
            //alert('tabbed !!! ');
            createRow();
        }
    }


    function addListener(){

        var selectnodes = document.getElementById("table1").getElementsByTagName('select');
        length = selectnodes.length;

        for (i=0; i <= selectnodes.length; i++){
            if(i > 0){document.getElementById("item_" + i).removeEventListener("keydown",onTab,false);}
            if(i === selectnodes.length){
                //alert("we got here!\ni = " + i + "\nand length is " + selectnodes.length);
                document.getElementById("item_" + i).addEventListener("keydown",onTab,false);
            }
        }
    }

如何用Javascript模拟JQuery的find-last方法

1 个答案: