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();

有什么更好的吗？

不不不，因为问题/答案变得和插件很棒......但不再起作用......

这是错误......我喜欢在点击事件切换时调用插件（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();

可以变成：

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

我什至需要一个 div 吗？

帮助！

它不起作用；这是完整的页面，也许它会帮助你看看它应该做什么

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

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

按下标题后.. tablerize 应该发生，删除旧的 ul 并用表格替换它，然后滑动切换它

好的..现在有状态...

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

我喜欢给你一个大拇指或任何可以帮助你评分的东西......我只是不知道如何

对于这个问题......我已经准确地发布了你给我的东西......它不起作用......让我们看看链接：http ://www.acecrodeo.com/new/04-classement.php

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

我迷路了！

4

1 回答 1

10

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

它应该按您的意愿工作。

还：

  • 要更新您的问题，您只需单击“编辑”并添加您想要的任何内容。
  • 要接受答案，请单击此文本左侧的复选标记。
于 2009-02-24T15:16:22.363 回答