Conflict when linking to table content with named anchors

[codemaestro]

Issue

When a block of content links to table content where named anchors are used, the mobile view (stacked table) content takes precedence over the desktop view content.

Example

• Links to named references in table:

<ul>
  <li><a href="#contentarea1">Content 1</a></li>
  <li><a href="#contentarea2">Content 2</a></li>
</ul>

• Table has rows with named anchors:

<table class="collapse">
  <tr>
    <td><a name="contentarea1"></a>Content 1</td>
    <td>Column content</td>
  </tr>
  <tr>
    <td>More content</th>
    <td>Some other content</th>
  </tr>
  <tr>
    <td><a name="contentarea2"></a>Content 2</td>
    <td>Column content</td>
  </tr>
  <tr>
    <td>More content</th>
    <td>Some other content</th>
  </tr>
...
</table>

Behaviour

stacktable.js duplicates the table content into a hidden table which displays when the mobile mode is engaged. However, the named anchor assumes priority based on its position in the DOM, even though the table isn't displayed.

Have you encountered this use case before?

Suggestion

I think the plugin should change the names of anchors embedded in table code when the table is hidden, and revert them to the original when the table is visible. Can you think of an alternate solution?

When I have time, I could try to submit a pull request. But if you've already solved the problem I would greatly accept your solution. ;-)

[martinb2]

I had a similar problem, with duplicate of ID - I have at table some form's elements like Checkbox etc. I solve this problem by simple script - adding prefix "sec_ " for all "ID" and "FOR" attributes:

$( document ).ready(function(){
if ( $( '.stackable' ).length ) {
$( '.stackable' ).stacktable();
$( '.stackable.small-only *' ).each( function(){
if ( $(this).attr( 'id' ) ) {
$(this).attr( 'id', 'sec_' + $(this).attr( 'id' ) );
}
if ( $(this).attr( 'for' ) ) {
$(this).attr( 'for', 'sec_' + $(this).attr( 'for' ) );
}
});
}
});