JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
<tr class="line_item">
  <td>L1C1</td>
  <td>L1C2</td>
  <td><input class="item_text" type="text" /></td>
</tr>
<tr class="line_item">
  <td>L2C1</td>
  <td>L2C2</td>
  <td><input class="item_text" type="text" /></td>
</tr>
</table>

JavaScript

$('tr.line_item').on( 'mouseenter', function() {
  $( this ).css({
    'outline': '1px solid #abb3b3',
    'background-color': '#E9E900'
  });
}).on( 'mouseleave', function() {
  $( this ).removeAttr('style');
});

$('.item_text').bind({        
	keyup:function(){
    objectEvent=$(this);
		
    if(objectEvent.val()!==""){
      //alert(objectEvent.val());
      objectEvent.css({    
    		'background-color': '#FF0000'
  		});
    }
    else{
    	objectEvent.removeAttr('style');
    }
  }//Fim keyUp
});