samedi 29 novembre 2014

jQuery transfer data between tables via textbox input.


asked a question yesterday and that got me going on the right path, but i'm absolutely stuck again, been trying to solve this for 12 hours now.


outline:


i have 3 tables;


tabel 1 - expected data (#expected)


table 2 - expected confirmed data (#scannedExp)


table 3 - unexpected confirmed data (#scannedUnExp)


so for a example.. if i was to enter "6666" in the input box it would reduce qty in the "#expected" table by 1 but create a column in the "#scannedExp" table with qty of 1 (with the i.e desc, cage grabbed from the #expected table).


if we was to enter '6666' this time it would delete the "#expected" row, but increase the table "#scannedExp"


if again we was to enter '6666' this time it would add a row to "#scannedUnExp" with just the code and qty (dont need the desc or cage)


and if we was to enter say "1234" it would add a row in "#scannedUnExp"


for some reason my codes not working in Jsfiddle as it works to some extent in my browser.


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>


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


}})
});




Aucun commentaire:

Enregistrer un commentaire