Prevent TH with rowspan from hiding
<p>I'm newbie in JS. I'm trying to hide table rows, but I do not know how to remain TH. Please give a direction.</p>

<p>HTML:
This is code of the table in which I'm trying to hide rows using JS</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;meta charset=utf-8 /&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;
&lt;label for="kwd_search"&gt;Search:&lt;/label&gt;
&lt;input type="text" id="kwd_search"/&gt;
&lt;table id="my-table" border="1" style="border-collapse:collapse"&gt;
    &lt;colgroup&gt;
     &lt;col class="col1" /&gt;
     &lt;col class="col2" /&gt;
     &lt;col class="col3" /&gt;
     &lt;col class="col4" /&gt;
    &lt;/colgroup&gt;
    &lt;thead&gt;
        &lt;tr&gt;
        &lt;th&gt;No&lt;/th&gt;
        &lt;th&gt;Use case&lt;/th&gt;
        &lt;th&gt;Exsample&lt;/th&gt;
            &lt;th&gt;Marker&lt;/th&gt; 
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope="rowgroup" rowspan="3"&gt;&lt;div class="vertical-text"&gt;1&lt;/div&gt;&lt;/th&gt;
            &lt;td&gt;1a&lt;/td&gt;
            &lt;td&gt;1b&lt;/td&gt;
            &lt;td&gt;1c&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;1d&lt;/td&gt;
            &lt;td&gt;1e&lt;/td&gt;
            &lt;td&gt;1f&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;1g&lt;/td&gt;
            &lt;td&gt;1h&lt;/td&gt;
            &lt;td&gt;1i&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;tbody&gt;
        &lt;tr&gt;
            &lt;th scope="rowgroup" class="past-simp" rowspan="3"&gt;&lt;div class="vertical-text"&gt;2&lt;/div&gt;&lt;/th&gt;
            &lt;td&gt;2a&lt;/td&gt;
            &lt;td&gt;2b&lt;/td&gt;
            &lt;td&gt;2c&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;2d&lt;/td&gt;
            &lt;td&gt;2e&lt;/td&gt;
            &lt;td&gt;2f&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;2g&lt;/td&gt;
            &lt;td&gt;2h&lt;/td&gt;
            &lt;td&gt;2i&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>JS (it was coped from <a href="http://blogs.digitss.com/javascript/jquery-javascript/implementing-quick-table-search-using-jquery-filter/" rel="nofollow">[link]</a>):</p>

<pre><code>$(document).ready(function(){
    // Write on keyup event of keyword input element
    $("#kwd_search").keyup(function(){
        // When value of the input is not blank
        if( $(this).val() !== "")
        {
            // Show only matching TR, hide rest of them
            $("#my-table tbody&gt;tr").hide();
            $("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        }
        else
        {
            // When there is no input or clean again, show everything back
            $("#my-table tbody&gt;tr").show();
        }
    });
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"], 
{
    "contains-ci": function(elem, i, match, array) 
    {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) &gt;= 0;
    }
});
</code></pre>
