0

我一直在努力解决这个问题，所以欢迎任何帮助。我使用 jquery replaceWith 函数在网格（div）和表之间创建了一个切换。这很好用，但我的问题在于通过每次点击保持每个元素的特定链接不变。

在附加的示例中，我已将项目添加到 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();
});
});
4

1 回答 1

0

我不确定我是否理解你的问题，但如果你想插入一个链接作为表头第一个孩子，你可以使用“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>
于 2013-08-12T19:23:09.767 回答