具有多级Rowspans的备用表行颜色

时间:2011-12-08 01:53:31

标签: jquery colors html-table alternating

以前曾经问过这个问题,但是当你进入更复杂的表格时,大多数人接受和使用的答案实际上并不是100%。

在此处查看原始帖子:Alternate row colors when you have rowspan

Nick Craver的答案是表格ulitizing rowpans的一个很好的解决方案。但是当你开始用colspans拆分列时,更复杂的东西似乎开始破坏了。

我认为问题可能与colspan有关,但我无法解读确切的问题。

我已经整理了一张复杂的表格(类似于我正在尝试使用的表格),它展示了Nick Craver最初的建议中的问题。

访问Nick在此处设置的jsFiddle页面:http://jsfiddle.net/nick_craver/JtPw5/

将此表格粘贴到HTML部分以对其进行测试:

    <table class="altRow" cellspacing="0" cellpadding="20">
    <tbody>
    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td rowspan="2">
    <h4>Rowspan of 2 - No issues here</h4>
    </td>

    <td colspan="2">
    <p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$600</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$300</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <h4>Rowspan of 2 - No issues here</h4>
    </td>

    <td colspan="2">
    <p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$600</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$300</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <h4>Rowspan of 2 - No issues here</h4>
    </td>

    <td colspan="2">
    <p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$600</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$300</p>
    </td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td rowspan="4">
    <h4>Complex Row Example</h4>
    </td>

    <td colspan="2">
    <p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>&nbsp;$4375</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$1750&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
    </td>

    <td>
    <p>One incentive per shared loop</p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td>
    <p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
    </tr>

    <tr>
    <td rowspan="4">
    <h4>Complex Row Example</h4>
    </td>

    <td colspan="2">
    <p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>&nbsp;$4375</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$1750&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
    </td>

    <td>
    <p>One incentive per shared loop</p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td>
    <p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="4">
    <h4>Complex Row Example</h4>
    </td>

    <td colspan="2">
    <p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>&nbsp;$4375</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$1750&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
    </td>

    <td>
    <p>One incentive per shared loop</p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td>
    <p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <h4>Rowspan of 2 - No issues here</h4>
    </td>

    <td colspan="2">
    <p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$600</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$300</p>
    </td>
    </tr>

    <tr>
    <td rowspan="4">
    <h4>Complex Row Example</h4>
    </td>

    <td colspan="2">
    <p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>&nbsp;$4375</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$1750&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
    </td>

    <td>
    <p>One incentive per shared loop</p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td>
    <p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="4">
    <h4>Complex Row Example</h4>
    </td>

    <td colspan="2">
    <p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>&nbsp;$4375</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$1750&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
    </td>

    <td>
    <p>One incentive per shared loop</p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td>
    <p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="4">
    <h4>Complex Row Example</h4>
    </td>

    <td colspan="2">
    <p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>&nbsp;$4375</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$1750&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td rowspan="2">
    <p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
    </td>

    <td>
    <p>One incentive per shared loop</p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td>
    <p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
    </td>

    <td class="table-rebate-column">
    <p>$0&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>

正如你所看到的那样,它没有被显示出来。并且看起来即使简单的行在它们上面有一个colspan时也无法正常工作。

我已经修好了但似乎无法弄明白。任何人都可以一劳永逸地解决这个问题!?我敢肯定,对于那些涉及大量表格数据的项目的网页设计师来说,这将会受益。

0 个答案:

没有答案