jQuery通過文本框輸入在表之間傳輸數據

Question

昨天我問了一個問題，這使我走上了正確的道路，但我絕對再次陷入困境。

大綱：

我有3張桌子；

表1-預期數據（#expected）

表2-預期的確認數據（#scannedExp）

表3-意外的確認數據（#scannedUnExp）

舉個例子。
如果我要在輸入框中輸入“ 6666”
它將“ #expected”表中的數量減少1，但會在“ #scannedExp”表中創建一個數量為1的列（即從#expected表中獲取了desc，cage）。

如果我們這次輸入“ 6666”，它將刪除“ #expected”行，但增加表“ #scannedExp”

如果這次我們再次輸入“ 6666”，它將在行號“ #scannedUnExp”中僅添加代碼和數量（不需要desc或cage）

如果我們輸入“ 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");
            }


}})
});

Answer 1

我從您的小提琴中注意到，該按鈕不會觸發click事件。

您的代碼有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控件或動態添加的DOM控件。 這就是為什么我一直都依賴它的原因。

第三，您在代碼的最后一行忘記了分號...

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


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

您可以在此提琴上檢查修改后的代碼

修改后，代碼工作正常。

jQuery通過文本框輸入在表之間傳輸數據

問題描述

1 個解決方案

解決方案1
0 2014-11-29 22:20:07

jQuery通過文本框輸入在表之間傳輸數據

問題描述

1 個解決方案

解決方案1 0 2014-11-29 22:20:07

解決方案1
0 2014-11-29 22:20:07