Элементы крепления при использовании .replaceWith()

Question

Я боролся с этим, поэтому любая помощь приветствуется. Я создал переключатель между сеткой (divs) и таблицей, используя функцию jquery replaceWith. Это отлично работает, но моя проблема заключается в постоянстве постоянного привязки каждой ссылки элемента к каждому клику.

В прилагаемом примере я добавил элемент в функцию replaceWith, но он отображает внешние элементы. Например, я хочу, чтобы ссылка оставалась в TR или Div, в которой она первоначально находится. Когда она отображает, ссылки визуализируются вне элементов Table/Div.

Пример:

<table class="toggle" style="display: table;"> 
    <tbody> 
    <tr class="table-head"> <--- LINK SHOULD BE HERE ---> <th>Title</th><th>Date</th><th>Info</th></tr><tr><td>Class Title</td><td>Item Details</td><td>Item Details</td></tr> 
    </tbody> 
</table> 

Надеюсь, я описал это достаточно хорошо для кого-то, чтобы ответить.

http://jsfiddle.net/rymill2/R3J5m/

JS:

$btnTable = ".button-table"; 
$btnGrid = ".button-grid"; 
$table = "table.toggle"; 
$grid = ".grid"; 
$link = "a.grid-link"; 

if ($($table).length > 0) {  
    $($btnTable).addClass('active'); 
} else { 
    $($btnTable).removeClass('active'); 
} 
if ($($grid).length > 0) { 
    $($btnGrid).addClass('active'); 
} else { 
    $($btnGrid).removeClass('active'); 
} 

$($btnTable).click(function() { 
$(this).addClass('active'); 
$($btnGrid).removeClass('active'); 
$($grid).replaceWith(function() { 
    var html = ''; 

    $('div:first', this).each(function() { 
     html += '<tr class="table-head">'; 
     $('div', this).each(function() { 
      html += '<th>' + $(this).html() + '</th>'; 
     }); 
     html += '</tr>'; 
    }); 

    $('div:not(:first)', this).each(function() { 
     var innerHtml = ''; 
     var innerLink = ''; 
     $($link, this).each(function() { 
      var href = $(this).attr('href'); 
      var id = $(this).attr('id'); 
      innerLink += '<a class="grid-link" href="'+ href +'" id="'+ id +'"></a>';  
     }); 

     $('div', this).each(function() { 
      innerHtml += '<td>' + $(this).html() + '</td>'; 
     }); 
     if (innerHtml != '') {    
     html += '<tr>'+ innerLink + innerHtml +'</tr>'; 
     } 
    }); 
    return $('<table class="toggle">' + html + '</table>').fadeIn(); 
}); 
}); 

$($btnGrid).click(function() { 
$(this).addClass('active'); 
$($btnTable).removeClass('active'); 
$($table).replaceWith(function() { 
    var html = ''; 
    $('tr', this).each(function() { 
     html += '<div class="result three columns h-100">'; 
     $('th', this).each(function() { 
      html += '<div>' + $(this).html() + '</div>'; 
     }); 
     $('td:first', this).each(function() { 
      html += '<div class="grid-title">' + $(this).html() + '</div>'; 
     });  
     $('td:not(:first)', this).each(function() { 
      html += '<div class="grid-row">' + $(this).html() + '</div>'; 
     }); 
     html += '</div>'; 

     $($link, this).each(function() { 
      var href = $(this).attr('href'); 
      var id = $(this).attr('id'); 
      html += '<a class="grid-link" href="'+ href +'" id="'+ id +'"></a>';  
     }); 
    }); 

    return $('<div class="grid">' + html + '</div>').fadeIn(); 
}); 
}); 

Answer 1

Я не уверен, если я понял ваш вопрос, но если вы хотите, чтобы вставить ссылку как таблицы головы первого ребенка, вы могли бы использовать «PREPEND "функция:

http://api.jquery.com/prepend/

$('.table-head').prepend('<a href="#">your link</a>'); 

и результат:

<table class="toggle" style="display: table;"> 
    <tbody> 
    <tr class="table-head"> <a href="#">your link</a> <th>Title</th><th>Date</th><th>Info</th></tr><tr><td>Class Title</td><td>Item Details</td><td>Item Details</td></tr> 
    </tbody> 
</table>