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

Question

我试图用 100% Javascript 来完成这个项目，而不使用任何 JQuery。

我有一个十列的表，当用户“Tabbs out”表最后一行的选择框(类 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);
            }
        }
    }