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.
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/
As per using jquery:
$("tr:has(td.tb_2c:empty)").hide();
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.
Related
Hi im having a issue with a simple problem. because for some reason i dont find anything wrong with my codes. Seems like my code is not reading my colspan. seems like this problem as been mark as duplicate. but i dont want to specify the width of the table since i want the table to be responsive and i use bootstrap table
<div>
<table class="table table-condensed">
<thead>
<tr class="text-uppercase text-contrail table-dark-head">
<th colspan="3">Spillage</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Material Cost / Kg</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
<tr>
<td>Spillage at 0.5%</td>
</tr>
</tbody>
</table>
</div>
i put this code inside my template. please see the image for the result. The Total and Remarks should be on the right side. but it end up with balance width.
We have a data table in a page and we want screen reader to read that as table. NVDA reads it as a data table by default. But JAWS does not seem to be able to identify the table element and reads the text from left to right row by row without indicating it is a table. I tried adding role="grid" and it did not work. I am wondering if I miss something.
The browser is IE11 and JAWS is 17.0.2727
<table tabindex="0" role="grid">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th aria-hidden="true"></th>
<th>Rate</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/19/16</td>
<td>
<span>10:50:09</span> - <span>12/19/16</span> <span>11:05:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>54</span><span>mL/hr</span>
</td>
<td>
<span>13.5</span><span>mL</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span>11:05:09</span> - <span>12/19/16</span><span>11:20:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>48</span><span>mL/hr</span>
</td>
<td>
<span>12</span><span>mL</span>
</td>
</tr>
</tbody>
</table>
for a datatable:
a caption
th row header and column header cell
Scope or header id attribute to associate cells with the headers in tables
Example:
<table>
<caption>City proper and Metropole area of largest cities in the world</caption>
<tr>
<td> </td>
<th scope="col">Shanghai</th>
<th scope="col">Karachi</th>
<th scope="col">Beijing</th>
</tr>
<tr>
<th scope="row">City proper</th>
<td>24,256,800</td>
<td>23,500,000</td>
<td>21,516,000</td>
</tr>
<tr>
<th scope="row">Metropole area</th>
<td>34,750,000</td>
<td>25,100,000</td>
<td>24,900,000</td>
</tr>
</table>
I have the same issue, that JAWS 2019 is not allowing Cursor navigation in the table cells. Especially cursor up/down in the same column is one of the accessibilty test cases that fails here.
I assume this has something to do with the <thead> and <tbody> elements not expected by the commonly used JAWS table navigation. Only option available is to use TAB/Shift+TAB to step through each cell in a row until the next/previous row can be accessed.
I want to create the row as per the list i am receiving using xslt and css. Currently my xslt looks like below. In the below code i am reading the DataList using xsl:for-each and I want to create a new row if my data list size is more then 7. Could anyone please help on this.
<table width="100%">
<tr>
<td width="97px" style="font-size:14px;font-weight:bold;color:#9EB7B4;">DATA:</td>
<td>
<table style = "width:100%; ">
<tr style="height:35px">
<xsl:for-each select="DataList">
<td><a href="#{generate-id(DataName)}" ><xsl:value-of select="DataName"/></a></td>
</xsl:for-each>
</tr>
</table>
</td>
</tr>
</table>
In my asp.net project I need to print a page with some dynamic content.I followed this article http://www.dotnetcurry.com/ShowArticle.aspx?ID=92 to achieve that and it works fine as long as the content I need to print fits in one page.
But in case of lengthy content, when I click on print button I see a print preview with all the content that needs to be printed and when printed it just prints the content that fits into one page.So I think when I call 'window.print()' it just prints whatever that can fit into a page and does not check if there is anymore content left to print on another page.And I am not sure how do I set the page breaks to get the entire content printed,as it is dynamic content.
Could someone please help me with this?
Thanks
Edit:
Here is some sample HTML rendered.
<table class="Main">
<tr>
<td class=”left bold”>
Some text
</td>
<td>
<span id="Label">Label</span>
</td>
</tr>
<tr>
......
......
</tr>
......
......
......
<tr>
<td>
<table class= “productslist”>
<tbody>
<tr>....</tr>
<tr>....</tr>
<tr class=”productTextAlign”> ......</tr>
<tr class=”additionalOptions”> ..... </tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr>...</tr>
<tr class=”productTextAlign”></tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
</tbody>
</table>
</td>
<tr>
</table>
the table with class is 'Main' is a html table and inside that there is another table with class 'productslist' which is actually a repeater. I am trying to apply the 'page break before' to this repeater using
table.productslist
{
page-break-before:auto;
}
which doesnt to work in FF6.0 and it seems to work fine in IE8.
You could use an Active X control for this:
http://www.meadroid.com/scriptx/docs/printdoc.asp
Alternatively you could take a CSS approach:
http://davidwalsh.name/css-page-breaks
https://stackoverflow.com/search?q=css+page+break
<tr>
<td>Blah!</td>
<td>X</td> <!-- TR containing X -->
<td>Woot!</td>
</tr>
<tr>
<td>Useful Data, contents unknown</td> <!-- Select this TR -->
</tr>
<tr>
<td>Useless data</td> <!-- Don't select this or any subsequent TR -->
</tr>
<tr>
<td>More crap I don't want</td>
</tr>
<tr>
<td>X</td> <!-- Another X -->
</tr>
<tr>
<td>Useful</td> <!-- Do select this one, since previous has X -->
</tr>
What XPath would return the <tr> immediately following the <tr> that contains X?
ChaosPandion's and Martin v. Löwis's answers both work for the sample you give, but if you are asking for the next tr, then presumably in some cases there are further tr elements in same table. In which case, the answers will give all the following or following-sibling tr elements.
Also going by the headline question rather than the sample, the xpath should probably allow for the X being in a th cell instead of td. And I'm guessing that you'd only want the following tr if it is in the same parent (thead, tbody, tfoot).
So I'd go for
//tr[* = 'X']/following-sibling::tr[1]
This should work.
tr[td/text() = 'X']/following-sibling::node()
//td[.='X']/following::tr
Use this for finding the next element from your element. Keep increasing for every hop:
//android.widget.TextView[contains(#text,'US Dollar')]/following::android.widget.TextView[1]