Search code examples
javascriptjquerytablesorter

using jquery and tablesorter, change the value of a chosen cell

I have a tablesorter table, that fills in correctly. What I am trying to do is to ensure that the cells are not being edited by more than 10% over the original value. For example, if the price field (denoted by id #price) is set to 6.00 in the first cell in the first row, and the next amount is 5.00 in the next row, I want to be able to change either price, or both, but not by more than 10% ( 6 becomes 6.60 for example). here is what I have so far:

$('#tally tr').live ('click', function(){
    var tempPrice =0;
    tempPrice = $(this).find('#price').val();
    // Which selects the correct row and price field and will store that value in tempPrice.
    $('#price').change(function(){
        var pnew =0;
        $('#tally tbody tr').each(function() {
            if ($('#price').val() > (tempPrice*1.1)){
                pnew = tempPrice*1.1;
                $('#price').val(pnew.toFixed(2));
                alert("Your cannot raise the price by more than 10%");
            }
        }); //end of tbody tr function
    }); // end of change function
}); // end of new price change function

To change the price and ensure it is not more than the 10%. The functions work to change the first cell, but I cant get the price change function to work if I am changing the second cell. Also, as if this is not complicated enough, if I try to change the second cell first, and then try the first cell, it retains the pnew price from the second cell, and then will update the table with that number (5 as in the example above), then it will update the cell with the correct number (6.60).

How do I get this to work the way I need it to? EDIT: the price can be lowered as much as the user wants, just not raised by more than 10%.

Solution

  • Firstly you should have 3 variables, one which stores the price, one which is the upper limit (*1.1) and one which is the lower limit (*0.9).

    You then need to use $('input').focus() to get the original value and $('input').blur() to run the validation when the user has finished.

    The problem is when you have multiple inputs it is hard to keep track of the temp price value as the user could click around, so you need to have a variable which keeps track of the most recent input selector so blur can validate that.

    var $current_element;
var temp_price;
var l_price;
var h_price;

$('input').focus(function() {
    $current_element = $(this);
    temp_price = $(this).value();
});

$('input').blur(function() {
    var value = $current_element.value();
    h_price = value * 1.1;
    l_price = value * 0.9;
    // Do validation of prices here and then either alert() 
    // or set $current_element.value(temp_price)
    // If validation fails call $current_element.focus() to return the user there
});

    Otherwise check out this option: https://stackoverflow.com/a/10393958/1160747

    Oh and as other have mentioned.... ID should be unique to one element, use class for multiple elements!