ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Show Hide HTML Table Column based on DropDownList selected value using jQuery<p>Hi <a class="username" rel="ArnoldDol"> ArnoldDol</a>,</p> <p>Refer below code.</p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&#34;&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(function () { $(&#34;#type&#34;).on(&#34;change&#34;, function () { var type = $(&#39;#type&#39;).find(&#34;option:selected&#34;).val(); if (type.toUpperCase() == &#39;INTEGER&#39; || type.toUpperCase() == &#39;DECIMAL&#39;) { $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(1)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(2)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(3)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(4)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(5)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(6)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(7)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(8)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(9)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(1)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(2)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(3)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(4)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(5)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(6)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(7)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(8)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(9)&#39;).show(); $(&#34;#category&#34;).val(&#39;non_categorical&#39;); } else { $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(1)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(2)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(3)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(4)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(5)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(6)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(7)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(8)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;th:nth-child(9)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(1)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(2)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(3)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(4)&#39;).hide(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(5)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(6)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(7)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(8)&#39;).show(); $(&#39;#tblTypes&#39;).find(&#39;td:nth-child(9)&#39;).show(); $(&#34;#category&#34;).val(&#39;Categorical&#39;); } }); }); &lt;/script&gt; &lt;div class=&#34;container-fluid&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;table class=&#34;table table-bordered table-striped table-highlight&#34; id=&#34;tblTypes&#34;&gt; &lt;thead&gt; &lt;th&gt; Type* &lt;/th&gt; &lt;th&gt; Name* &lt;/th&gt; &lt;th&gt; Label* &lt;/th&gt; &lt;th&gt; Unit* &lt;/th&gt; &lt;th&gt; Category* &lt;/th&gt; &lt;th&gt; List_name* &lt;/th&gt; &lt;th&gt; Variable_name* &lt;/th&gt; &lt;th&gt; choice_label* &lt;/th&gt; &lt;th&gt; &amp;nbsp; &lt;/th&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;select id=&#34;type&#34; name=&#34;type&#34; class=&#34;form-control&#34;&gt; &lt;option&gt;integer&lt;/option&gt; &lt;option&gt;decimal&lt;/option&gt; &lt;option&gt;text&lt;/option&gt; &lt;option&gt;select_one&lt;/option&gt; &lt;option&gt;select_multiple&lt;/option&gt; &lt;option&gt;barcode&lt;/option&gt; &lt;option&gt;image&lt;/option&gt; &lt;option&gt;date&lt;/option&gt; &lt;option&gt;string&lt;/option&gt; &lt;option&gt;geo_point&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input type=&#34;text&#34; id=&#34;name&#34; name=&#34;name&#34; class=&#34;form-control&#34; value=&#34;&#34; /&gt; &lt;/td&gt; &lt;td&gt; &lt;input type=&#34;text&#34; id=&#34;label&#34; name=&#34;label&#34; class=&#34;form-control&#34; value=&#34;&#34; /&gt; &lt;/td&gt; &lt;td&gt; &lt;select id=&#34;unit&#34; name=&#34;unit&#34; class=&#34;form-control&#34;&gt; &lt;option&gt;cm&lt;/option&gt; &lt;option&gt;cm2&lt;/option&gt; &lt;option&gt;cm3&lt;/option&gt; &lt;option&gt;mm&lt;/option&gt; &lt;option&gt;mm2&lt;/option&gt; &lt;option&gt;mm3&lt;/option&gt; &lt;option&gt;m&lt;/option&gt; &lt;option&gt;m2&lt;/option&gt; &lt;option&gt;m3&lt;/option&gt; &lt;option&gt;area&lt;/option&gt; &lt;option&gt;ha&lt;/option&gt; &lt;option&gt;acre&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select id=&#34;category&#34; name=&#34;category&#34; class=&#34;form-control&#34;&gt; &lt;option&gt;Categorical&lt;/option&gt; &lt;option&gt;non_categorical&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input type=&#34;text&#34; id=&#34;list_name&#34; name=&#34;list&#34; class=&#34;form-control&#34; value=&#34;&#34; /&gt; &lt;/td&gt; &lt;td&gt; &lt;input type=&#34;text&#34; id=&#34;variable_name&#34; name=&#34;variable&#34; class=&#34;form-control&#34; value=&#34;&#34; /&gt; &lt;/td&gt; &lt;td&gt; &lt;input type=&#34;text&#34; id=&#34;choice_list&#34; name=&#34;choice&#34; class=&#34;form-control&#34; value=&#34;&#34; /&gt; &lt;/td&gt; &lt;td&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-secondary btn-block&#34; onclick=&#34;addVariable()&#34;&gt; Add&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/272924/Show-Hide-HTML-Table-Column-based-on-DropDownList-selected-value-using-jQuery/https://www.aspforums.net:443/Threads/272924/Show-Hide-HTML-Table-Column-based-on-DropDownList-selected-value-using-jQuery/Tue, 03 Sep 2019 06:38:00 GMT