0

我正在尝试创建一个在单击外部元素时在网格和表格之间切换的切换元素。但是，我的大部分功能都存在，当多次选择“表格”和“网格”链接时，将返回多个空的 div/tr。

在退货之前如何防止这种情况发生？如果不是这样，那么我将如何隐藏返回的空元素？

请记住，这需要在 IE8+ 中兼容。

下面拨弄一下。谢谢你。

http://jsfiddle.net/rymill2/EeRu4/5/

$('.button-table').click(function () {
    $('.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 () {
            html += '<tr>';
            $('div', this).each(function () {
                html += '<td>' + $(this).html() + '</td>';
            });
            html += '</tr>';
        });
        return '<table>' + html + '</table>';
    });
});

$('.button-grid').click(function () {
    $('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', this).each(function () {
                html += '<div>' + $(this).html() + '</div>';
            });
            html += '</div>';
        });
        return '<div class="grid">' + html + '</div>';
    });
});
4

1 回答 1

0

好的，所以我能够在仍然使用 jQuery 的同时解决这个问题。唯一依赖 CSS 的部分是：

.grid .result:first-child {display:none;}

这从网格视图中隐藏了 TH 标记的项目。

否则，我所要做的就是在表格按钮的切换中添加一个 IF 语句并添加一个额外的变量（innerHtml）。

这是修复后的小提琴的最终代码和链接：

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

$('.button-table').click(function() {
    $('.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 = '';
            $('div', this).each(function() {
                innerHtml += '<td>' + $(this).html() + '</td>';
            });
            if (innerHtml != '') {
            html += '<tr>' + innerHtml + '</tr>';
            }
        });
        return '<table>' + html + '</table>'; 
    });
});

$('.button-grid').click(function() {
    $('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', this).each(function() {
                html += '<div>' + $(this).html() + '</div>';
            });
            html += '</div>';
        });
        return '<div class="grid">' + html + '</div>';
    });
});
于 2013-08-08T12:41:46.337 回答