I have a table that creates new rows through PHP in regard to a database table that gets updated. Each row contains a unique class "rdClass" with an additional number that is incremented by a counter. A textbox is contained within each row with a unique id "workhr" with an additional number that is incremented as well. (rdClass0, ..., rdClass[n] ---------- workhr0, ..., workhr[n])
<td class='rdClass" . $counter . "'><input id='workhr" . $counter ."' name='HrsInShift" . $counter . "'></td>
What I'm trying to do is change the background color of rdClass# whenever the value in textbox workhr# changes respectively. I've already created a nice script in JQuery but it's not dynamic.
$(function() {
content = $('#workhr0').val(); $('#workhr0').keyup(function() { if ($('#workhr0').val() != content) { content = $('#workhr0').val(); $('.rdClass0').css("background-color", "blue"); } else $('.rdClass0').css("background-color", ""); }); });
How could I make this dynamic so that it detects value change for all workhr[n] and modify their rdClass[n] background colors respectively?
var dynamic_val;
$('[id^=workhr]').keyup(function(){
if($(this).val() != dynamic_val){
dynamic_val = $(this).val();
$('.rdClass'+$(this).prop('id').split('workhr')[1]).css('background-color', 'blue');
}else{
$('.rdClass'+$(this).prop('id').split('workhr')[1]).css('background-color', 'inherit');
}
});