hightlight a particular td

What I would like to do (and is of course not working) is:

• When the user changes the value of the input in a row, that then the unit price and the subtotal tds in THAT row changes the background to orange (the class for that is .basket-table td.hightlight).

It also needs to be hi开发者_如何学JAVAghlighted for a specific time and later the bg needs to turn back to light blue.

This is the link: http://jsfiddle.net/Q4T58/

Could you please help me?

Many thanks in advance!!

Try this http://jsfiddle.net/Q4T58/3/

$(function(){

    var delay = 2000;
    $(".basket-bsol .search-input").change(function(){

    var tr = $(this).closest("tr");

    tr.find(".price-enabled, .subtotal-price").addClass("hightlight");    

    setTimeout(function(){
          tr.find(".price-enabled, .subtotal-price").removeClass("hightlight");   
    }, delay); 

    });

});

I'm not 100% clear on what you're looking for, but this should at least get you started. It finds the td elements with classes .subtotal-price and .price-enabled (which you had as orange in your example):

$("input[type=text]").change(function() {
   var current = $(this).closest("tr").find(".subtotal-price, .price-enabled");
   current.addClass("hightlight");
   setTimeout(function() {
      current.removeClass("hightlight"); 
   }, 1000); 
});

You can use a combination of setInterval timer and oninput event to determine when those fields have changed (if oninput is fired then setInterval can be cleared)

this exam uses jQuery UI for the highlight effect

example

// traditional setInterval to check if input changed...
var isPriceChanged = function() {
        $('.search-input').each(function() {
            var $that = $(this),
                oldvalue = $that.data('oldvalue');

            // initialize oldvalue
            if (oldvalue === undefined) {
                $that.data('oldvalue', $that.val());
            } else {
                // update/highlight fields if value has changed
                if ($.trim($that.val()) !== $.trim(oldvalue)) {
                    highlightChangedFields($that);
                    $that.data('oldvalue', $that.val());
                }
            }
        });
    },
    // check input fields every half sec
    priceChangedTimer = setInterval(isPriceChanged, 500); 

// *new html5* 'input' event
$('.search-input').bind('input', function() {
    highlightChangedFields($(this));
    // disable traditional way if this event is called
    clearInterval(priceChangedTimer);
});

var timer = undefined,
    highlightChangedFields = function($that) {
        var $row = $that.closest('.basket-row')
            $price = $row.find('.price-enabled'),
            $subtotal = $row.find('.subtotal-price'),
            $fields = $.merge($price, $subtotal);

        // clear previous timers
        clearTimeout(timer);

        // update price values
        // probably use some kind of money formatter
        // such as: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
        $price.text('£' + $that.val());
        $subtotal.text('£' + $that.val());

        // highlight price fields
        $fields.stop(true, true).effect('highlight', {color: '#ffbc0a'}, 2000);
    };