hightlight a particular td

Question

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 highlighted 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!!

Do you have any javascript/jquery that you've tried? – James Montagne Aug 08 '11 at 21:30 — James Montagne, Aug 08 '11 at 21:30

score 1 · Answer 1 · answered Aug 08 '11 at 21:36

1

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); 

    });

});

answered Aug 08 '11 at 21:36

ShankarSangoli

69,612
13
93
124

@OrangeJuice - Did you get a chance to take a look at this? – ShankarSangoli Aug 08 '11 at 21:44

score 0 · Answer 2 · answered Aug 08 '11 at 21:37

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

score 0 · Answer 3 · answered Aug 08 '11 at 23:25

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

hightlight a particular td

3 Answers3