使用jQuery将无序列表转换为表格

Question

使用jQuery将无序列表转换为表格

3

我想将一个<ul><li>转换成一个漂亮的表格，并使用CSS进行样式设置。

我希望使用jQuery来完成这个转换。

* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$

持续不断的...

用 <ul> 的第一行作为表头，其他行作为表格单元格...

页面上可能会有4-5个 <ul>。

锦上添花的是，按照收入从高到低排序！

我找到了这个问题：

如何使用 JQuery 将 HTML 表格转换为列表？

它正好相反...但也许是一个好的起点？我不知道，我会去看看...但问题仍然很开放。

我找到了这个问题：

如何使用 JQuery 将 HTML 表格转换为列表？

它正好相反...但也许是一个好的起点？我不知道，我会去看看...但问题仍然很开放。

另一个与解决方案相关的问题...

如果我想要“删除” 并将其替换为表格...

我不想制作一个空表格...

这是代码...也许不是“优化”的，但它可以工作

$('#texte').append('<div id="where_my_table_goes"></div>');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();

还有更好的解决方案吗？

不，不，不，因为问题/答案变成了插件，很棒...但是它不再起作用...

这里是bug...我想在单击事件切换时调用插件（tablerize），并用表格替换整个UL列表，但它没有实现。

这是一小段代码片段：

<script type="text/javascript">
    $(document).ready(function() {

        $('#texte > h1').next().hide(500);  
        $('#texte > h1').click(function() {
        $(this > ul).tablerize();
        $(this).toggle(500);
        });
    });
</script>

不出所料，它无法正常工作。我肯定是搞砸了什么... 我尝试调整插件但没有成功！...

我真的很想保留那段代码：

$("texte").append('<div id="where_my_table_goes"></div>');
$(#where_my_table_goes"></div>').append(table);
$('#my_oddly_formatted_list').remove();

that can become:

remove the ul
append the div to (this)
put the table into that div

我需要一个div标签吗？

求助！

它不起作用；这里是完整的页面，也许看一下会对了解它应该做什么很有帮助

http://www.acecrodeo.com/new/04-classement.php

我使用延迟隐藏只是为了看到数据是否存在...

按下标题后..应该出现表格，删除旧的ul，将其替换为table，并进行滑动切换

好的..现在是这种状态...

我只知道编辑答案并发布它...没有任何更新按钮..

我想给你点赞或任何可以帮助您评分的东西...我只是不知道怎么做

至于问题...我已经发布了您给我的所有内容..但它不起作用...看看链接：http://www.acecrodeo.com/new/04-classement.php

这里是错误：它切换标题...

我好迷失!

- Marc-Andre Menard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paolo Bergantino · Accepted Answer

如果你有这样的HTML，那么这就是做法：

<ul id='my_oddly_formatted_list1' class='odd_list'>
    <li>Column A|Column B|Column C</li>
    <li>Value A1|Value B1|Value C1</li>
    <li>Value A2|Value B1|Value C2</li>
    <li>Value A3|Value B1|Value C3</li>
    <li>Value A4|Value B1|Value C4</li>
</ul>
<ul id='my_oddly_formatted_list2' class='odd_list'>
    <li>Column D|Column E|Column F</li>
    <li>Value D1|Value E1|Value F1</li>
    <li>Value D2|Value E1|Value F2</li>
    <li>Value D3|Value E1|Value F3</li>
    <li>Value D4|Value E1|Value F4</li>
</ul>
<ul id='my_oddly_formatted_list3' class='odd_list'>
    <li>Column G|Column H|Column I</li>
    <li>Value G1|Value H1|Value I1</li>
    <li>Value G2|Value H1|Value I2</li>
    <li>Value G3|Value H1|Value I3</li>
    <li>Value G4|Value H1|Value I4</li>
</ul>

然后，你可以使用jQuery编写一个类似这样的插件：

jQuery.fn.tablerize = function() {
        return this.each(function() {
                var table = $('<table>');
                var tbody = $('<tbody>');
                $(this).find('li').each(function(i) {
                        var values = $(this).html().split('*');
                        if(i == 0) {
                                var thead = $('<thead>');
                                var tr = $('<tr>');
                                $.each(values, function(y) {
                                        tr.append($('<th>').html(values[y]));
                                });
                                table.append(thead.append(tr));
                        } else {
                           var tr = $('<tr>');
                           $.each(values, function(y) {
                                   tr.append($('<td>').html(values[y]));
                           });
                           tbody.append(tr);
                        }
                });
                $(this).after(table.append(tbody)).remove();
        });
};

然后您可以以以下任何方式调用:

// tablerize all UL elements in the page
$('ul').tablerize();

// only UL elements with class 'odd_list'
$('ul.odd_list').tablerize();

// individually tablerize all the lists
$('#my_oddly_formatted_list1').tablerize();
$('#my_oddly_formatted_list2').tablerize();
$('#my_oddly_formatted_list3').tablerize();

就排序等方面而言，有许多插件可用于向表格提供此功能。

编辑

您的代码问题在这些行中：

$(document).ready(function() {
    /*$('#texte > h1').next().hide(1000); */ 
    $('#texte > h1').click(function() {
        $(this).tablerize();
        /*$(this).next().toggle(500);*/
    });
});

我写的 tablerize 插件需要一个 <ul> 元素来制表。当你将 this 传递给它时，你传递给它匹配的 h1 而不是 <ul>。如果你替换这一行：

$(this).tablerize();

使用这一行代码，可以找到标题后紧接着的UL元素：

$(this).next('ul').tablerize();

它应该按你的意图工作。

另外：

要更新您的问题，只需点击“编辑”并添加任何您想要的内容。
要接受答案，请单击此文本左侧的复选标记。

使用jQuery将无序列表转换为表格

** 编辑 **

编辑