2011-08-08 65 views
0

我想怎麼做(和當然是不工作的)是:hightlight特定TD

  • 當用戶改變連續輸入的值,即再單價,小計THAT行中的tds將背景更改爲橙色(該級別爲.basket-table td.hightlight)。

它還需要在特定時間突出顯示,然後bg需要轉回淺藍色。

這是鏈接:http://jsfiddle.net/Q4T58/

你能幫幫我嗎?
非常感謝提前!

+0

你有試過的任何javascript/jquery嗎? –

回答

1

試試這個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); 

    }); 

}); 
+0

@OrangeJuice - 你有機會看看這個嗎? – ShankarSangoli

0

我不是你找什麼明確的100%,但至少應該讓你開始。它發現td元素與類.subtotal-price.price-enabled(你在你的例子有橙色):

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

您可以使用setInterval定時器和oninput事件的組合來確定何時這些領域發生了變化(如果oninput是燃煤然後setInterval可以被清除)

這次考試用了jQuery UI爲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); 
    };