I have a problem here that when I click copy row and I want to get the remaining qty per item, the result is not accurate.
So let's just say the item mouse has 100 qty, and I inputted new qty for 50. So the remaining should be 50. And when I copied the item mouse and inputted 40, so the remaining now is 10. Same goes for other items. This should be the expected output.
Current Situation
JSFIDDLE
$('.qty').on("keyup", function() {
var id = $(this).data('id');
var value = $(this).val();
var sum = 0;
$("#table_name .qty").filter(function(){
if ($(this).data("id") == id){
sum += parseFloat(value);
}
});
console.log(sum);
$('.remaining').val(sum);
});
Your overall logic is REALLY unclear. Here is an example that might help.
$(function() {
function refreshIndex($t) {
$('tbody tr', $t).each(function(i, el) {
var c = i + 1;
var select = $(this).find('td:eq(0)').text(c);
});
}
function copyRow(e) {
var self = $(e.target);
var row = self.closest("tr");
row.clone().appendTo(self.closest("tbody"));
refreshIndex($("#table_name"));
}
function updateItem(e) {
var self = $(e.target);
var row = self.closest("tr");
var p = parseInt(self.val());
var q = parseInt(row.find("td:eq(2) input").val());
$('.remaining', row).val(q - p);
}
$("#table_name tbody").on("keyup", '.price', updateItem);
$("#table_name tbody").on('click', '.copy', copyRow);
});
#table_name tr td input {
width: 4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
<thead>
<tr>
<th>No</th>
<th>Item</th>
<th>Total</th>
<th>Qnty</th>
<th>Action</th>
<th>Remaing</th>
</tr>
</thead>
<tbody>
<tr class="trs" id="tr-1">
<td>1</td>
<td>Mouse</td>
<td><input type="text" value="100" readonly></td>
<td><input type="text" class="price" data-id="79"></td>
<td><button class="copy" id="copy-1">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-2">
<td>2</td>
<td>Keyboard</td>
<td><input type="text" value="20" readonly></td>
<td><input type="text" class="price" data-id="80"></td>
<td><button class="copy" id="copy-2">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-3">
<td>3</td>
<td>Monitor</td>
<td><input type="text" value="50" readonly></td>
<td><input type="text" class="price" data-id="81"></td>
<td><button class="copy" id="copy-3">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
</tbody>
</table>
When I enter 40 under Price, 60 appears as the difference between the Quantity and the Amount entered.
When Copy is clicked, a new row is appended, and functionality is binded to it already due to use of .on().
Hope that helps.
Basically you can use the data-id attribute to target the rows you actually want to update.
var clone_controll = function(num) {
//Needed to mod this so add rows have the event handler
$('#table_name').on("keyup", ".qty", function() {
var id = $(this).data('id');
var value = $(this).val();
var sum = 0;
//Filter is the wrong choice here - it is designed to filter objects
/*$("#table_name .qty").filter(function(){
if ($(this).data("id") == id){
//I think this logic is incorrect as well
//You are only getting the value from the
//field you are typing in
sum += parseFloat(value);
}
});*/
/*Use a better selector with each()*/
$("#table_name [data-id=" + id +"]").each(function(){
//In this context "this" is the item iterated in "each"
sum += parseFloat($(this).val());
console.log(sum);
});
console.log("Final: " + sum);
//Here is your problem, this updates All "remaining fields
//$('.remaining').val(sum);
//All rows contiaining this data id
var relevantRows = $("[data-id=" + id + "]").closest("tr");
//Update the "remaining fields in those rows
$(relevantRows).find(".remaining").val(sum);
});
}
clone_controll();
var $tableBody = $('#table_name').find("tbody");
clickEvent();
function clickEvent(){
$tableBody.find('.copy').off('click').on('click',function() {
$trLast = $(this).closest('tr'),
$trNew = $trLast.clone();
$trLast.after($trNew);
clickEvent();
clone_controll();
});
function refresh_index(){
$('#table_name > tbody > tr').each(function (i) {
i++;
var select = $(this).find('td').eq(0).text(i);
});
}
refresh_index();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table_name">
<thead>
<tr>
<th>No</th>
<th>Item</th>
<th>Qty</th>
<th>Your Qty</th>
<th>Action</th>
<th>Remaing per item(not per row)</th>
</tr>
</thead>
<tbody>
<tr class="trs" id="tr-1">
<td>1</td>
<td>Mouse</td>
<td><input type="text" value="100" readonly></td>
<td><input type="text" class="qty" data-id="79"></td>
<td><button class="copy" id="copy-1">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-2">
<td>2</td>
<td>Keyboard</td>
<td><input type="text" value="20" readonly></td>
<td><input type="text" class="qty" data-id="80"></td>
<td><button class="copy" id="copy-2">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-3">
<td>3</td>
<td>Monitor</td>
<td><input type="text" value="50" readonly></td>
<td><input type="text" class="qty" data-id="81"></td>
<td><button class="copy" id="copy-3">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
</tbody>
</table>
Your logic is still pretty unclear, but hopefully this gets you moving in the right direction.
Related
I make a table in a form to enable user to submit several item in one time. I am able to use jquery to get the first row of the value input by user. But when they type in the value in the second row, it show error. I am pretty sure there is something wrong with the array that I am using. I have try 2 methods, both method work but it only takes the value from first row only.
<form>
<table>
<thead>
<tr>
<th>Item Code</th>
<th>Item Name</th>
<th>Status</th>
</tr>
</thead>
<tbody id="entrybody">
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
</tbody>
</table>
</form>
$(function() {
$.post("action.php", function(data) {
$("[name='title']").val(data.title);
$("[name='body']").val(data.body);
}, "json");
setInterval(function() {
var itemlist = new Array;
var count = 1;
var title = $("[name='title']").val();
var body = $("[name='body']").val();
itemlist[count - 1] = {};
$("#productbody tbody tr").each(function() {
var that = $(this);
if (that.find("[name='prd_code']").val().length !== 0) {
/*itemlist.push(code);
itemlist.push(name);
itemlist.push(cond);*/ //method 1
itemlist[count - 1].code = that.find("[name='prd_code']").val();
itemlist[count - 1].name = that.find("[name='prd_name']").val();
itemlist[count - 1].cond = that.find("[name='prd_cond']").val(); //method 2
count++;
}
});
console.log(itemlist);
}, 2000);
});
===== Console message (first row) =====
0:
code: "test_code1"
cond: "test_status1"
name: "test_name1"
I've changed the method of the event to a .change() for this example.
Then I've changed the following code:
var itemlist = new Array;
var title = $("[name='title']").val();
var body = $("[name='body']").val();
$("#productbody tbody tr").each(function(i) {
var that = $(this);
if (that.find("[name='prd_code']").val().length !== 0) {
itemlist[i] = {};
itemlist[i].code = that.find("[name='prd_code']").val();
itemlist[i].name = that.find("[name='prd_name']").val();
itemlist[i].cond = that.find("[name='prd_cond']").val(); //method 2
}
});
One problem was that you use this itemlist[count - 1] = {}; before your foreach statement. so you only created the first object.
Demo
$(function() {
$("#productbody tbody tr input").change(function() {
//setInterval(function() {
var itemlist = new Array;
var title = $("[name='title']").val();
var body = $("[name='body']").val();
$("#productbody tbody tr").each(function(i) {
var that = $(this);
if (that.find("[name='prd_code']").val().length !== 0) {
itemlist[i] = {};
itemlist[i].code = that.find("[name='prd_code']").val();
itemlist[i].name = that.find("[name='prd_name']").val();
itemlist[i].cond = that.find("[name='prd_cond']").val(); //method 2
}
});
console.log(itemlist);
});
//}, 2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table id="productbody">
<thead>
<tr>
<th>Item Code</th>
<th>Item Name</th>
<th>Status</th>
</tr>
</thead>
<tbody id="entrybody">
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
</tbody>
</table>
</form>
As far as I understand you want to create an array of the values from all table cells in all rows. Here is a relative simple way to do this without JQuery.
document.addEventListener(`change`, handle);
function handle(evt) {
if (evt.target.name.startsWith(`prd_`)) {
// retrieve all rows
const values = [...document.querySelectorAll(`tbody tr`)]
// map to objects containing row number and values
.map(row => ({
row: row.rowIndex,
values: [...row.querySelectorAll(`[name^='prd_']`)]
.reduce( (acc, val) => ({...acc, [val.name]: val.value}), {})
}))
.filter(val => (val.values.prd_code || ``).trim().length > 0);
document.querySelector(`pre`).textContent = JSON.stringify(values, null, 2);
}
}
<table>
<thead>
<tr>
<th>Item Code</th>
<th>Item Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
<tr>
<td><input type="text" name="prd_code"></td>
<td><input type="text" name="prd_name"></td>
<td><input type="text" name="prd_cond"></td>
</tr>
</tbody>
</table>
<pre></pre>
I have a table where I can add multiple numbers and create an add more button also to add a new row on the table and calculate all total using jQuery. Now when I remove the new row, the total value is not updated, but when I click some of the input fields and then it is updated. Now my question is
How can I make the total value auto-update when the row is removed.
Below is my code:
function addMore() {
var new_raw = $('<tr><td>Remove<td><input type="number" class="addData"></td></tr>');
new_raw.insertBefore('#my_new_raw');
$("#myTable").on('click', '.remove', function() {
$(this).parent().parent().remove();
});
}
$(document).on('blur keyup', '.addData', function(e) {
var sum = 0;
$('.addData').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="myTable">
<tbody>
<tr>
<td>Value 1</td>
<td><input type="number" class="addData"></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="number" class="addData"></td>
</tr>
<tr id="my_new_raw">
<td>Add More</td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td><input type="number" readonly id="my_total"></td>
</tr>
</tbody>
</table>
I know I didn't call a function to update the total, because I don't know how. Help me here. Thanks for advance
TL;DR Simply calculate again.
Your calculate way is already good, just wrap it with a function, and then you can call it whenever you want to.
function addMore() {
var new_raw = $('<tr><td>Remove<td><input type="number" class="addData"></td></tr>');
new_raw.insertBefore('#my_new_raw');
$("#myTable").on('click', '.remove', function() {
$(this).parent().parent().remove();
calculate();
});
}
function calculate() {
var sum = 0;
$('.addData').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
}
$(document).on('blur keyup', '.addData', function(e) {
calculate();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="myTable">
<tbody>
<tr>
<td>Value 1</td>
<td><input type="number" class="addData"></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="number" class="addData"></td>
</tr>
<tr id="my_new_raw">
<td>Add More</td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td><input type="number" readonly id="my_total"></td>
</tr>
</tbody>
</table>
If you use blur and keyup, the total will not be changed when changing the number value with arrow. I prefer input event instead. You can trigger the input event when clicking on Remove:
$('.addData').trigger('input');
Working Code Example:
function addMore() {
var new_raw = $('<tr><td>Remove<td><input type="number" class="addData"></td></tr>');
new_raw.insertBefore('#my_new_raw');
$("#myTable").on('click', '.remove', function() {
$(this).parent().parent().remove();
$('.addData').trigger('input');
});
}
$(document).on('input', '.addData', function(e) {
var sum = 0;
$('.addData').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="myTable">
<tbody>
<tr>
<td>Value 1</td>
<td><input type="number" class="addData"></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="number" class="addData"></td>
</tr>
<tr id="my_new_raw">
<td>Add More</td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td><input type="number" readonly id="my_total"></td>
</tr>
</tbody>
</table>
OR: By using a function
function addMore() {
var new_raw = $('<tr><td>Remove<td><input type="number" class="addData"></td></tr>');
new_raw.insertBefore('#my_new_raw');
$("#myTable").on('click', '.remove', function() {
$(this).parent().parent().remove();
updateTotal();
});
}
$(document).on('input', '.addData', function(e) {
updateTotal();
});
function updateTotal(){
var sum = 0;
$('.addData').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="myTable">
<tbody>
<tr>
<td>Value 1</td>
<td><input type="number" class="addData"></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="number" class="addData"></td>
</tr>
<tr id="my_new_raw">
<td>Add More</td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td><input type="number" readonly id="my_total"></td>
</tr>
</tbody>
</table>
Simple wrap the calculate code as function .And use closest() instead of parent().parent()
function addMore() {
var new_raw = $('<tr><td>Remove<td><input type="number" class="addData"></td></tr>');
new_raw.insertBefore('#my_new_raw');
}
function calc() {
var sum = 0;
$('.addData').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
}
$(document).on('blur keyup', '.addData', function(e) {
calc();
}).on('click', '#myTable .remove', function() {
$(this).closest('tr').remove();
calc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="myTable">
<tbody>
<tr>
<td>Value 1</td>
<td><input type="number" class="addData"></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="number" class="addData"></td>
</tr>
<tr id="my_new_raw">
<td>Add More</td>
<td></td>
</tr>
<tr>
<td>Total</td>
<td><input type="number" readonly id="my_total"></td>
</tr>
</tbody>
</table>
<script>
function addMore() {
var new_raw = $('<tr><td>Remove<td><input type="number" class="addData"></td></tr>');
new_raw.insertBefore('#my_new_raw');
$("#myTable").on('click', '.remove', function () {
$(this).parent().parent().remove();
var sum = 0;
$('.addData').each(function (i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
});
}
$(document).on('blur keyup', '.addData', function (e) {
var sum = 0;
$('.addData').each(function (i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('addData')) {
sum += parseFloat(this.value);
}
}
});
$('#my_total').val(sum.toFixed(2));
})
</script>
Any help would be greatly appreciated.
What I'm trying to achieve is when a number/text in input into the code box it searches the table, if found increments quantity by one, if not found adds a new row counting the no column by one.
I already a some basic jQuery code.
<input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Release"/>
<table> <thead>
<tr>
<th>No</th>
<th>Code</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4444</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>5555</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>6666</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>7777</td>
<td>1</td>
</tr>
</tbody>
</table>
edit: my code.
$(document).ready(function() {
$("#btnSubmit").click(function() {
var code = $("input#code").val()
var table = $("table tbody");
table.find('tr').each(function(i) {
no = $(this).find('td').eq(0).text(),
productId = $(this).find('td').eq(1).text(),
Quantity = $(this).find('td').eq(2).text();
if (productId == code) { //see if product is in table
Quantity = +Quantity + +Quantity; // increase qty
alert('found' + Quantity);
} else {
// Add new row
alert('not found');
}
});
});
});
I put together a JSFiddle for you, and copied the JS code here. I tried to make it as beginner friendly as possible...
$("#btnSubmit").on("click", function(){
numRows = $("tr").length;
for(var i=1 ; i<numRows ; i++){
var code = $("tr:nth-child(" + i + ") td:nth-child(2)").html();
var qty = $("tr:nth-child(" + i + ") td:nth-child(3)").html();
if(code == $("#code").val()){
$("tr:nth-child(" + i + ") td:nth-child(3)").html(parseInt(qty) + 1);
return true;
}
}
$("tbody").append("<tr><td>" + numRows + "</td><td>" + $("#code").val() + "</td><td>1</td></tr>");
return true;
});
I have created a sample code using jQuery. It took me like 10 minutes to figure out what you are trying to achive but I hope I understood you quite well:
HTML Side:
<input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Release"/>
<table> <thead>
<tr>
<th>No</th>
<th>Code</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4444</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>5555</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>6666</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>7777</td>
<td>1</td>
</tr>
</tbody>
</table>
and our JavaScript:
$(document).ready(function() {
var found = false;
$("input#btnSubmit").on("click", function() {
var search_val = $("input#code").val();
$("tr").each(function() {
var obj = $(this);
obj.find("td").each(function() {
if(parseInt($(this).html()) == parseInt(search_val))
{
obj.find("td:nth-of-type(3)").html(parseInt(obj.find("td:nth-of-type(3)").html()) + 1);
found = true;
}
});
})
if(found == false)
{
$("table").append("<tr><td>"+($("tr").length)+"</td><td>"+search_val+"</td><td>1</td></tr>");
}
found = false;
});
});
Here's JSFiddle: http://jsfiddle.net/f17gudfw/4/
I have a dynamic html table:
<table>
<tbody>
<tr>
<td>Name</td>
<td>City</td>
</tr>
<tr class="new" id="item1">
<td><input class="names" value="John Smith" type="hidden">John Smith</td>
<td><input class="cities" value="London" type="hidden">London</td>
</tr>
<tr class="normal" id="item2">
<td><input class="names" value="Regina Mills" type="hidden">Regina Mills</td>
<td><input class="cities" value="Berlin" type="hidden">Berlin</td>
</tr>
<tr class="normal" id="item3">
<td><input class="names" value="Marcus Bell" type="hidden">Marcus Bell</td>
<td><input class="cities" value="Liverpool" type="hidden">Liverpool</td>
</tr>
</tr>
</tbody>
</table>
From my js file I'm storing the information in this way:
var arrayNames = [];
$(".names").each(function(){
arrayNames.push($(this).val());
})
var arrayCities = [];
$(".cities").each(function(){
arrayCities.push($(this).val());
})
params += '&names='+arrayNames;
params += '&cities='+arrayCities;
With this I am getting in my php:
$_REQUEST['names']
: string = John Smith,Regina Mills,Marcus Bell
$_REQUEST['cities']
: string = London,Berlin,Liverpool
But I only need in the $_REQUESTs the values when the class in the table tr's is "new"
How can I do that?
Thanks!
You could try
$(".names").each(function(){
if ($( this ).parent().attr( "class" ) == "new")
arrayNames.push($(this).val());
})
Just target the .names within .new. You can use map() to get the values:
var arrayNames = $('.new .names').map(function() { return this.value; }).get();
.. and do the same thing for .cities
Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>
Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!
Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each