CODEWITHSUNDEEP
csshtml
Alejandro P.
Alejandro P.

Reputation: 47

Hide an entire row of table where a cell is empty

How can I hide the whole row if a cell of the second column is empty Using CSS?

   <table class="maintable" >
  <tr>
<td class="tb_1c">Brand:</td>
<td class="tb_2c">{{ITEMBRAND}}</td>
  </tr>
  <tr>
<td class="tb_1c">Part Number: </td>
<td class="tb_2c">{{ITEMSKU}}</td>
  </tr>
  <tr>
<td class="tb_1c">Part Type:</td>
<td class="tb_2c">{{U_ITEMCAT}}</td>
  </tr>
  <tr>
<td class="tb_1c">Size</td>
<td class="tb_2c"></td>
  </tr>
</table>

I have it working with Jquery

$("tr").filter(function(){return $("td:last",this).is(":empty");}).hide();

But the platform where the table is showing doesn't like it.

Upvotes: 1

Views: 1124

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

There is no CSS solution, because currently you cannot select an element on the basis of what elements it contains.

If you have problems in implementing a JavaScript solution, please ask a new question, showing the relevant HTML and JavaScript code that reproduce the problem.

Upvotes: 0

rism
rism

Reputation: 12132

As per using jquery: 

 $("tr:has(td.tb_2c:empty)").hide();

Upvotes: 1

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

You can use the :not(), :has() and :empty selectors combined like this:

$("tr").not(":has(td:nth-child(2):not(:empty))").hide();

DEMO: http://jsfiddle.net/fA6S8/2/

Upvotes: 3

Related Questions