Jim B Jim B - 1 year ago 56
HTML Question

How do I hide a table row conditionally in HTML/Javascript?

Newbie to StackOverflow - so thanks to all who might help.

An application we use to deliver quotes online to our customers outputs HTML that I can mostly customize. There is a type of row that is output that I'd like to suppress in the HTML conditionally.

The HTML looks like:

<tr class="row-heading">
<td colspan="3" class="col-description">
<td class="col-picture">

<td class="col-unit-price">
<td class="col-extended-price">

When the data within the class of "col-description" is P= then i'd like to suppress the entire table row with the class of row-heading.

I am great fiddling with HTML and CSS, but JavaScript not so much. I did a bit of research before posting, and I saw something about needing to .hide() but I can't figure out how to formulate this type of JavaScript.

Also, where within the HTML rendered page does this JavaScript need to live? At the beginning? At the end? In a block?

Thanks in advance for help and advice!

Answer Source

Normally you would add your JavaScript inside a <script> after the whole html so that it is applied when html is loaded.

Now your task has two parts: find all the elements to hide and hide them. Since you tagged this with jQuery I suppose that using jQuery is ok. To find cells with P=, you may use this custom :contains selector:

var $cells = jQuery('td:contains("P=")');

To get the rows, you have to use the parent() method:

var $rows = jQuery('td:contains("P=")').parent();

Finally, you want to hide them, so hide them:


The latter line is what you want, as far as I understand your question.

But as guys have mentioned, this kind of questions is not encouraged here. You should rather try to learn basics using other sources and ask here if you have specific questions of non-basic level.