Chennakesav Rao Chennakesav Rao - 3 months ago 18
CSS Question

Div inside how to call class in css?

I have mentioned the code below.

Need Output:when you click on check box don't display(Hide) the tr class="invalid" columns.If you unchecked display the all the tr columns.

Any solution is appreciable.

Answer

I guess you can use the adjacent selector to make it work:

#testday input[type="checkbox"]:checked ~ #testtable .invalid {
      display:none;
}

snippet below:

#testday input[type="checkbox"]:checked ~ #testtable .invalid {
      display:none;
}
     <div id="testday">
     <input type="checkbox" checked><span class="invalid black-border">Tests not in POR</span>
        <table id="testtable" class="tablesorter custom-popup">
        <thead>
        <tr>
            <th data-priority="critical" class="testName">Test Name</th>
            </tr>
        </thead>
        <tbody>
             <tr class="invalid">
                            <td class="testName">
                                        <abbr title="BasicPerformanceMatrixTest">BasicPerformanceMatrixTest</abbr>
                                    </td>
                
            </tr>
            <tr class="invalid">
                            <td class="testName">
                                        <abbr title="StripeReadECCFatalDuringPLIRestore_NSGSE-23331">StripeReadECCFatalDuringPLIRestore_NSGSE-23331</abbr>
                                    </td>
                
            </tr>
             <tr class="invalid">
                            <td class="testName">
                                        <abbr title="ContextReplayTimes_NSGSE-27617">ContextReplayTimes_NSGSE-27617</abbr>
                                    </td>
                
            </tr>
              <tr class="invalid">
                            <td class="testName">
                                        <abbr title="XORRecoveryShouldSkipRetiredPages_NSGSE-27131">XORRecoveryShouldSkipRetiredPages_NSGSE-27131</abbr>
                                    </td>
               
            </tr>
             <tr>
                            <td class="testName">
                                        <abbr title="PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801">PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801</abbr>
				</td>
                 
            </tr>
            <tr>
                            <td class="testName">
                                        <abbr title="PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802">PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802</abbr>
                             </td>
             
            </tr>
                                    <tr>
                            <td class="testName">
                                        <abbr title="PliDumpECCFatal(XOROff_1Page)_NSGSE-22803">PliDumpECCFatal(XOROff_1Page)_NSGSE-22803</abbr>
                                    </td>
               
            </tr>
                                    <tr>
                            <td class="testName">
                                        <abbr title="PLIECCFatal(SuperXORtest)_NSGSE-23162">PLIECCFatal(SuperXORtest)_NSGSE-23162</abbr>
                                    </td>
                
            </tr>
            </tbody>
            </table>
            </div>

Comments