Question

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

大纲：

我有3张桌子;

表1 - 预期数据（#expected）

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

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

所以举个例子..
如果我要进入＆＃34; 6666＆＃34;在输入框中它会减少＆＃34;＃expected＆＃34; table by 1但在＆＃34;＃scansExp＆＃34;中创建一列数量为1的表（使用desc，从#expected表中抓取的数据库）。

如果我们要进入＆＃39; 6666＆＃39;这次它会删除＆＃34;＃expected＆＃34;行，但增加表＆＃34;＃scanningExp＆＃34;

如果再次进入＆＃39; 6666＆＃39;这次它会在＆＃34;＃scansUnExp＆＃34;中添加一行。只有代码和数量（不需要desc或笼子）

如果我们要输入说＆＃34; 1234＆＃34;它会在＆＃34;＃scansUnExp＆＃34;

中添加一行

出于某种原因，我的代码在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

我注意到你的小提琴按钮不会触发点击事件。

您的代码有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
});

您可以在此fiddle

上查看修改后的代码

修改后代码工作正常。

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

1 个答案: