Javascript jQuery通过文本框输入在表之间传输数据

昨天我问了一个问题，这让我走上了正确的道路，但我又被完全卡住了

大纲：

我有三张桌子

表1-预期数据（#预期）

表2-预期确认数据（#scannedExp）

表3-意外确认数据（#scannedunp）

因此，举个例子……
如果在输入框中输入“6666”
它会将“#expected”表中的数量减少1，但会在“#scannedExp”表中创建一个数量为1的列（即从#expected表中抓取的desc、cage）

如果我们这次输入'6666'，它将删除“#expected”行，但增加表“#scannedExp”

如果我们这次再次输入'6666'，则会在“#scanneduncup”中添加一行，其中只包含代码和数量（不需要描述或框架）

如果我们输入“1234”，它会在“#scannedUnExp”中添加一行

由于某种原因，我的代码不能在JSFIDLE中工作，因为它在某种程度上可以在我的浏览器中工作

 预期已扫描
代码
描述
数量
笼子
 未预期已扫描
代码
数量
笼子
 预期数据
代码
描述
数量
笼子
4444
车门
3.
S2222
5555
门把手
1.
S2222
6666
头灯
2.
S2222
7777
座位
5.
S2222

我的javascript

 $(window).load(function(){
$("#btnSubmit").on("click", function(){
    numRows = $("#expected tr").length; //loop thought expected data
    for(var i=1 ; i<numRows ; i++){ 
        var code = $("#expected tr:nth-child(" + i + ") td:nth-child(1)").html();
        var desc = $("#expected tr:nth-child(" + i + ") td:nth-child(2)").html();
        var qty = $("#expected tr:nth-child(" + i + ") td:nth-child(3)").html();
        var cage = $("#expected tr:nth-child(" + i + ") td:nth-child(4)").html();


            // if code is in expected data -1 from qty col
            if(code == $("#code").val()){    
            $("#expected tr:nth-child(" + i + ") td:nth-child(3)").html(parseInt(qty) - 1);

            //delete if last one in expected table
            if(qty ==1 ){$("#" + code).remove();} 


            // loop thought scanned expected table
            numRowsB = $("#scannedExp tr").length; 
            for(var ib=1 ; ib<numRows ; ib++){   
            var codeExp = $("#scannedExp tr:nth-child(" + ib + ") td:nth-child(1)").html();
            var qtyExp = $("#scannedExp tr:nth-child(" + ib + ") td:nth-child(3)").html();    

            // if in scannedExp add qty by one
            if(codeExp == $("#code").val()){   
            $("#scannedExp tr:nth-child(" + ib + ") td:nth-child(3)").html(parseInt(qtyExp) + 1);
            return true;
            }

            else{ //if not found in expected table add row to scannedExp
            $("#scannedExp tbody").append("<tr><td>" + $("#code").val() + "</td><td>" + desc + "</td><td>1</td><td>" + cage + "</td></tr>");
            return true;
            }
            } 
            return true;
            }
            else{
            alert("not in expected");
            }


}})
});  

$（窗口）.load（函数（）{
$（“#btnsupmit”）。在（“单击”，函数（）上{
numRows=$（“#预期tr”）.length；//循环预期数据
对于（var i=1；i我从您的小提琴中注意到，该按钮不会触发单击事件

你的代码有3个问题，我已经解决了，然后代码运行良好

首先
我想您是想使用
$（document.ready（）
而不是
$（window.load（）
）。
由于您希望侦听事件，因此最好等到加载了所有DOM元素并且
文档
已准备就绪

后再尝试执行其他操作

但是，由于我将在第二点中告诉您的事件触发器并不取决于文档是否准备就绪，因此它不是必需的，所以我删除了它

秒：

我将代码修改为使用

$（文档）。on（'click'，'selector'，function（）{}）；

而不是

$（元素）。on（'click'，function（）{}）；

我使用的.on（）将用于从页面加载的DOM控件，或动态添加的控件。这就是我一直依赖它的原因

第三 您在代码的最后一行忘记了分号

   ...
   ...
   else{
            alert("not in expected");
            }


}})     //  <-- This line has no semi-colon
});  

。。。
...
否则{
警报（“不在预期范围内”）；
}
}})     //
//Use this event
$(document).on('click','#btnSubmit',function(){
   ...
   ...
});

//Instead of using this
$("#btnSubmit").on("click", function(){
   ...
   ...
});

   ...
   ...
   else{
            alert("not in expected");
            }


}})     //  <-- This line has no semi-colon
});