Question

I have the following table dynamically generated. Number of columns is dynamic and is between 4-12 based on user selection.

<table>
<tr>
    <th class="roleComparethead">Function</th>
    <th class="roleComparethead"">Type</th>
    <th class="roleComparethead">1111</th>
    <th class="roleComparethead">222</th>
    <th class="roleComparethead">555</th>
</tr>
<tr class="cRow">
    <td class="roleComparethead"> Profiles Maintenance</td>
    <td class="type"> Internal </td>

    <td class="access"><span class="accessLevel">Update</span></td>
    <td class="access"><span class="accessLevel">Read</span></td>
    <td class="access"><span class="accessLevel">NoAccess</span> </td>
</tr>
    <tr class="cRow">
    <td class="roleComparethead"> Profiles Maintenance</td>
    <td class="type""> Internal </td>

    <td class="access"><span class="accessLevel">Read</span></td>
    <td class="access"><span class="accessLevel">Read</span></td>
    <td class="access"><span class="accessLevel">Read</span> </td>
</tr>

I want to hide rows in the table if values of all cells with class="accessLevel" in that row are same and display only if the values are different. How do i achieve this using jQuery or Javascript?

Thank you.

Answer 1

You can try this solution

http://jsfiddle.net/mjaric/aLWVM/

It can be done in less lines, but I in purpose split it to more. Check it out and let me know if behaviour is correct.