jquery - 使用 jQuery 切换列表/ GridView

Question

在我的一个网站页面上，我在表格元素上显示数据，但我想添加一个按钮让用户选择是否希望将数据视为列表(表格)或网格 (ul>li>图片)。最好的方法是什么？

                <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 属性来创建一个列表。然后我有了我的 table 和我的新 div(带有 diplay:none)。当用户单击按钮时，我在表上显示无，在我的 div 上显示 block 。这是正确的方法吗？

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

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

你怎么看？

Answer 1

在这种情况下，我会做的是根据所述“ View ”(列表/网格)使用不同的相同标记和样式。根据用户的选择，您可以相应地设置每个样式。

(这里的解决方案可以很简单，当用户与所述按钮交互时，将“list/grid”上的类名添加到页面中的 body 标签!)

虽然您的图像已经填充，但我不会隐藏该数据，因为它已经填充，我只会最小化所述图像并将其变成缩略图。 (在浏览器中渲染图像没有用处，您只需附加 style='display:none;')

更新:

刚刚引用了 craigslist，看看他们如何处理这种情况。他们实际上在其中使用“display:none”对所述图像进行样式设置。因此，取决于您的客户/元素等。样式中的 display:none 由您决定!

希望这对您有所帮助!