jQuery通过文本框输入在表格之间传输数据答案

【问题标题】：jQuery transfer data between tables via textbox inputjQuery通过文本框输入在表格之间传输数据
【发布时间】：2017-07-05 01:32:09
【问题描述】：

我昨天问了一个问题，这让我走上了正确的道路，但我又完全陷入了困境。

大纲：

我有 3 张桌子；

表 1 - 预期数据 (#expected)

表 2 - 预期的确认数据 (#scannedExp)

表 3 - 意外确认数据 (#scannedUnExp)

举个例子..
如果我要在输入框中输入“6666”
它将“#expected”表中的数量减少 1，但在“#scannedExp”表中创建一个数量为 1 的列（即 desc，从 #expected 表中抓取的笼子）。

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

如果这次我们再次输入“6666”，它将在“#scannedUnExp”中添加一行，仅包含代码和数量（不需要 desc 或笼子）

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

由于某种原因，我的代码无法在 Jsfiddle 中运行，因为它在某种程度上可以在我的浏览器中运行。

http://jsfiddle.net/j3psmmo3/

    <body>
  <input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Submit"/>

<P>Scanned Expected</P>  
<table id = "scannedExp" > <thead>
            <tr>
                <th>Code</th>
                <th>Desc</th>
                <th>Qty</th>
                <th>Cage</th>

            </tr>
        </thead>
    <tbody>

    </tbody>
</table>
<P>Scanned Un Expected</P>   
<table id = "scannedUnExp" > <thead>
            <tr>
                <th>Code</th>
                <th>Qty</th>
                <th>Cage</th>

            </tr>
        </thead>
    <tbody>

    </tbody>
</table>
    <P>Data Expected</P>
    <table id = "expected"> <thead>
            <tr>
                <th>Code</th>
                <th>Desc</th>
                <th>Qty</th>
                <th>Cage</th>

            </tr>
        </thead>
    <tbody>
        <tr id="4444" >
            <td>4444</td>
            <th>Car Door</th>
            <td>3</td>
            <th>S2222</th>
        </tr>
        <tr id="5555" >
            <td>5555</td>
            <th>door handel</th>
            <td>1</td>
            <th>S2222</th>

        </tr>
        <tr id="6666" >
            <td>6666</td>
            <th>headlight</th>
            <td>2</td>
            <th>S2222</th>

        </tr>
        <tr id="7777">
            <td>7777</td>
            <th>seat</th>
            <td>5</td>
            <th>S2222</th>

        </tr>
    </tbody>
</table>


</body>

我的 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");
            }


}})
});

【问题讨论】：

标签： javascript jquery input html-table

【解决方案1】：

我从您的小提琴中注意到该按钮不会触发点击事件。

您的代码有 3 个问题，我已修复，然后代码运行良好。

第一我认为您的意思是使用$(document).ready() 而不是$(window).load()。由于您想监听事件，最好等到所有 DOM 元素都加载完毕并且 document 为 ready 后再尝试执行任何其他操作。

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

第二：

我修改了代码以使用$(document).on('click','selector',function(){}); 而不是$(element).on('click',function(){});

//Use this event
$(document).on('click','#btnSubmit',function(){
   ...
   ...
});

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

我使用的 .on() 将适用于从页面加载的 DOM 控件，或者您动态添加的控件。这就是为什么我一直依赖它。

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

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


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

您可以在fiddle上查看修改后的代码

修改后代码运行良好。

【讨论】：