javascript - Show and hide table row on hover, initially hidden, not hidden if input -

I have a line that has input I when I hover over the line, I want to extend the line and input I show it and then it does not fall. However, I want the line to start and if there is a value in the input I do not want to collapse the line.

Here's a fiddle:

  & lt; Table style = "width: 300px; background color: # d3d3d3" & gt; & Lt; Tr id = "filter" style = "background-color: blue" & gt; & Lt; Td> & Lt; Input id = "search" placeholder = "search" style = "width: 100px" /> gt; & Lt; / Td> & Lt; TD & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Jill & lt; / TD & gt; & Lt; TD & gt; Smith & lt; / TD & gt; & Lt; TD & gt; 50 & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Eve & lt; / TD & gt; & Lt; TD & gt; Jackson & lt; / TD & gt; & Lt; TD & gt; 94 & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; $ ("# Filter"). Hover (function () ($ ("#search"). Show ();}, function () {$ ("# search"). Hide ();});  

I would say the correct answer is the combination of two answers :)

< Pre> // var locks = $ ("#search"). mother-father (). mother-father (); Hide $ ("#Search") () .; / * Search input initially * / $ ("# filter"). Hover (function () ($ ("#search"). Show ();}, function () {if ($ ("# search") .val (). Trim () == "") // search only The box is hidden $ ("#search"). Hide ();});

Edit

  $ ("#search"). Hide (); / * Hide search input initially * / $ ("# filter") Focus (function () {$ ("#search"). SlideToggle ();}, function () {if ($ ("# search") .val (). Trim () == "") // only Empty $ ("#search"), hide the search box. SlideTag ();});