如何使用jQuery在表格或列表html之间切换

How to switch between table or list html with jQuery

本文关键字：html 之间 列表 何使用 jQuery 表格      更新时间：2023-09-26

我试图让用户选择如何显示数据-表或列表样式。这可以通过切换按钮实现吗?是使用页面重新加载还是动态地使用DOM操作更好?我是一个菜鸟，仍然与Javascript和jQuery和需要一点推动在这里。谢谢!

编辑:例如，我希望所有的表标签切换为div或ul。这是一个常见的Wordpress循环。

下面是我的代码: 
<?php if ( have_posts() ) : ?>
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Title</th>
            <th>Picture</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
    <?php while ( have_posts() ): the_post();?>
        <tr>
            <td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
            <td><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></td>
            <td><?php echo strip_tags(get_the_term_list( $post->ID, 'my-taxonomy', '', ', ' )); ?></td>
        </tr>
    <?php endwhile; ?>
    </tbody>
</table>

您可以简单地使用按钮为父元素添加布局classname，并使用CSS覆盖默认样式。

所以，也许你的默认布局是list: 
.mystuff {
    /* list-styles */ 
}

…然后，对于table-layout:

.mystuff.table {
    /* override CSS for table-layout */
}

我找到了这个解决方案:http://bootsnipp.com/snippets/featured/list-grid-view

它完美地为我工作，因为我使用Bootstrap框架。

相关文章：