Question

在我的一个网站页面上，我在表格元素上显示数据，但我想添加一个按钮，让用户选择是否要将数据看作列表（表格）或网格（ul＆gt; li＆gt; IMG）。最好的方法是什么？

                <table>
                    <tr>
                        <td>datas 1</td>
                        <td><img src="image1.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 2</td>
                        <td><img src="image2.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 3</td>
                        <td><img src="image3.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 4</td>
                        <td><img src="image4.jpg"></td>
                    </tr>
                </table>

如果我们使用切换按钮切换：

                 <ul>
                    <li><img src="image1.jpg"></li>
                    <li><img src="image2.jpg"></li>
                    <li><img src="image3.jpg"></li>
                    <li><img src="image4.jpg"></li>
                </ul>

我是否必须使用jQuery或CSS制作它？

我尝试的是在页面加载完成时创建一个div元素，并通过在table元素中获取img属性来创建一个列表。然后我有我的桌子和我的新div（使用diplay：none）。当用户点击按钮时，我在桌面上显示无，并在我的div上显示块。这是正确的方法吗？

我认为这不是很“酷”，因为我有重复的内容：

<table>...</table>
<div style="display:none">...</div>

你怎么看待它？

Answer 1

在这种情况下我要做的是根据所说的“视图”（列表/网格）使用相同的标记和样式。根据用户的选择，您可以相应地设置每个样式。

（这里的解决方案就像在用户与所述按钮交互时在页面中的body标签上添加'list / grid'上的类名一样简单！）

虽然您的图片已经填充，但我不会隐藏这些数据，因为它已经填充了，我只会最小化所述图像并将其转换为缩略图。（在浏览器中没有使用渲染图像，你只需附加style ='display：none;'）

<强>更新

刚刚引用了craigslist来了解它们如何处理这种情况。他们实际上用'display：none'来表示图像。因此，取决于您的客户/项目等。显示：样式中的任何一个都取决于您！

希望这有帮助！

Answer 2

创建两个类：“grid”和“list”并使用ul标记。对于grid创建css表。

请参阅jsFiddle中的示例代码：http://jsfiddle.net/maximkou/9CwXh/6/

HTML：

<ul class="grid data-table">
    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
        </span>
    </li>
    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
            </span>
    </li>
    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
            </span>
    </li>

    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
            </span>
    </li>
</ul>

<a href="" class="toggleView">Toggle view to List</a>

JS：

$('.toggleView').bind('click', function(e){
    e.preventDefault();
    var text = 'Toggle view to ';
    if ($('.data-table').hasClass('grid')){
        $(this).html(text + 'Grid');
        $('.data-table').removeClass('grid').addClass('list');
    } else {
        $(this).html(text + 'List');
        $('.data-table').removeClass('list').addClass('grid');
    }
});

CSS：

.grid {
    display: table;
    list-style-type: none;
}
.grid li {
    display: table-row;
}
.grid li span {
    width: 200px;
    display: table-cell;
}

.list li .caption {
    display: none;
}

Answer 3

我最近需要做同样的事情。和你一样，我希望在交换周围的html时保留内容。 CSS主要用于样式化表格/网格。这个节目的真正明星是jQuery。

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

HTML

<div class="row"> 
    <a class="button-table" data-target="table"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Table"></a>
    <a class="button-grid" data-target="grid"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Grid"></a>
</div>
<div class="content">
    <table>
        <tr class="table-head">
            <th>Title</th>
            <th>Date</th>
            <th>Info</th>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
    </table>
</div>

CSS

.table-head, div, a, p, span {
    box-sizing:border-box !important;
}
.columns, .column {
    float:left;
    position:relative;
}
.h-100 {
    min-height:110px;
}
.three {
    width:25%;
}
a:hover {
    cursor:pointer;
    background:#e9e9e9;
}
a.toggle-table, a.toggle-grid {
    position:relative;
    float:left;
    margin-right:6px;
    font-size:20px;
    padding:8px;
}
.settings, .link {
    display:none;
}
.grid {
    overflow:auto;
}
.grid .result {
    padding:2%;
    background:#e9e9e9;
    border:1px solid #333;
}
.grid .result:first-child {
    display:none;
}
.grid .result .title, .grid.result .row, .grid .result .link {
    position:relative;
    float:left;
    width:100%;
}
.grid .result .title {
    border-bottom:1px solid yellow;
    padding-bottom:2px;
    margin-bottom:2px;
    color:#282828;
    font-size:16px;
    font-weight:bold;
}
.grid .result .row {
    color:#666;
    font-size:10px;
}
.table-head {
    background:#333;
    color:#fff;
    text-align:left;
    font-size:12px;
}

JS

$('.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>';
});
});

使用jQuery切换列表/网格视图

3 个答案: