我需要隐藏“tr”元素的CSS规则，其子元素“td”具有带有空值属性的子“输入”元素？

Question

I realize the question title is a bit confusing, but in reality, I mean to ask exactly what I've typed.

I am trying to write a CSS file for printing (nausea rising) and I am wanting to eliminate white space in unnecessary rows (the necessity, or rather, the lack thereof, is determined by input fields that have empty values).

The proper CSS syntax (if there exists any) is relentlessly eluding me.

I have used selectors like this before:

input[type=text]

So I could assume (hopefully... gulp!) that I could use something like:

input[val='']

However:

1) I'm not sure using apostrophes/quotes is even legal inside those brackets (what's that area of a CSS selector called, again?)

2) I wouldn't know how to put a selector inside those brackets (if even possible) since the actual "tr"s are what I'm trying to target, just "tr"s with td children with input children with empty vals.

Wallowing in random syntax, I tried:

tr[td input val=]

Very much NOT to my surprise, did I find that obviously this didn't work, then I realized I had no clue how to proceed, if I wanted to accomplish this strictly in CSS.

~ Takes a quick breathe

Okay, I realize I'm asking a lot out of CSS, but if it's selector system wasn't so powerful I wouldn't even assume this possible.

Lastly, I am already implementing javascript, jQuery, and even server-side C#.net (WebMatrix) so if this answer is best solved using these other languages, I don't mind, I just want the simplest cleanest solution, if possible, as any scripting method I use will require the addition of another class to all td elements therein, and there are many, not to mention the scripting itself.

Any help, as always, is greatly appreciated.

---------------------EDIT REGARDING ALNITAK'S ANSWER------------------------

I tried to add the following jQuery just before my window.print(); JavaScript command:

$('tr > td > input[value=""]').parent().parent().css('display', 'none');
$('tr > td > input[value=""]').parent().parent().css('visibility', 'hidden');

I have checked my # of parents, and all is as it should be there. The only other thing that might be interfering is that I have razor embedded in the values by default (although they are explicitly assigned empty strings on page start so, it should be fine). Just in case though I also tried:

$('tr > td > input[value=null]').parent().parent().css('display', 'none');
$('tr > td > input[value=null]').parent().parent().css('visibility', 'hidden');

But, alas, to no avail.

Answer 1

If I'm understanding you correctly :

You can't do what you want to in CSS, not yet anyway.

What you're looking for is a css parent selector.

http://css-tricks.com/parent-selectors-in-css/

By using the selector:

tr td input[value=''] 

You'll be selecting the inputs, not the <tr>s.

One way to achieve what you want is to have something "watch" the page you're on (from javascript) and apply a class to anything you want hidden, when you print. Then in your print stylesheet just use that class to hide!

Answer 2

You can't do this with pure selectors, because the end result of a selector is always the matching child node, not their ancestors.

You need to find those matching child nodes, and then climb back up the tree again, eg in jQuery:

$('tr > td > input[value=""]').parent().parent().css('color', 'red');

You can use .closest('tr') instead of .parent().parent() if you prefer.

Also using jQuery, you can use the .has() function to create a chain that matches elements containing particular children:

$('tr').has('> td > input[value=""]').css('color', 'red');

The .has() function is more efficient than using the :has pseudo-selector, although I would expect neither to be as efficient as the full selector above which takes advantage of document.querySelectorAll on modern browsers.

If you can't get the input[value=""] part to work, try this:

$('tr > td > input').filter(function() {
    return this.value == '';
})....

Answer 3

Your prose translates to this CSS:

!tr>td>input:matches(:not([value]),[value=''])

However, both ! and :matches are CSS4 selectors that are not implemented yet. You'd be better off using JavaScript:

var qsa = document.querySelectorAll("tr>td>input"), l=qsa.length, i;
for( i=0; i<l; i++) {
    if( qsa[i].value == '') qsa[i].parentNode.parentNode.style.display = "none";
}

Answer 4

Try using the :has() selector: http://api.jquery.com/has-selector/

Description: Selects elements which contain at least one element that matches the specified selector.

$('tr:has(td input[value=""])').css({color:'red'});