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

我喜欢得到一个

，并用CSS将它做成一个漂亮的表格

我喜欢用jQuery进行转换

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

不停地

用

的第一行做一个表头，用其他行做一个单元格

页面上可能有4-5个

s

为了给蛋糕加上糖霜，让我们把它从收入最大的人分到收入最小的人

---

我发现了这个问题：

恰恰相反。。。但也许是个好的开始？我不知道，我会查出来的。。。但这个问题仍然悬而未决

---

我发现了这个问题：

恰恰相反。。。但也许是个好的开始？我不知道，我会查出来的。。。但这个问题仍然悬而未决

---

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

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

我不喜欢空桌子

这是代码。。。也许不是“优化”，但它是有效的

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

我甚至需要一个div吗

救命啊

---

它不起作用； 这是完整的一页，看看它应该做什么可能会有很大帮助

我使用延迟隐藏只是为了看到数据在那里

在按下标题后。。Tableize应该发生，删除旧ul并将其与表一起重新放置，然后滑动切换它

---

好的。。现在有状态了

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

我想给你一个大拇指或任何可以帮助你的评级。。。我只是不知道怎么做

对于这个问题。。。你给我的东西，我已经仔细看过了。。而且它不起作用。。。让我们看看链接：

这里是错误：它切换标题

---

我太迷路了

如果您的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.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();
        });
};

就排序等而言，有许多方法可以为表提供此功能

**编辑** 代码的问题在于以下几行：

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

我编写的

tablerize

插件需要一个

元素进行tablerize。当您传递它时，您传递的是匹配的

h1

，而不是

。如果替换此行：

$(this).tablerize();

这一行将在标题后立即找到UL元素：

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

它应该按照你的意愿工作

此外：

• 要更新您的问题，只需单击“编辑”并添加所需内容
• 要接受答案，请单击文本左侧的复选框

---

哇，太快了。。。也许你以前做过什么？我会尝试让它在我的代码中工作，但看起来还是不错的。。就工资而言，我自己的工资不够，我努力使学习和工作顺利进行。。。我可以给你两个大拇指！我只能非常感谢你花了这么多时间来回答我的问题上帝保佑你妈妈更新了我的问题，展示了如何在很多UL元素上这样做。至于薪水，我是开玩笑的。：）向上投票将是一个体面的替代品。。。或者让它成为答案！。。。正如你所说的那样，它起作用了。。。我不常写jquery，所以我没有你的好。。。如果我只买一本书来教我jquery。。。你有什么建议？谢谢，你真的做了《我的日子》这本书，只要看看文档就行了。另外，我不知道我要说多少次，但你不应该把评论/更新作为答案。在帖子中使用“编辑”。

// 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);*/
    });
});

$(this).tablerize();

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