首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：LEEstarmmmmm | 2023-08-30 11:39
如何解决《使用jQuery将无序列表转换为表》经验，为你挑选了1个好方法。

我喜欢得到

  • 一个很好的桌子,我会用CSS来设计.

    我喜欢用jQuery进行的转换

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

    ......等等......

    用

      表格单元格的第一行和其他表格制作一个表头...

        页面上可能有4-5 秒.

        要为蛋糕添加糖霜,请将其从最大的收入者分类到最小的收入者!

        我发现了这个问题:

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

        恰恰相反......但也许是一个好的开始？我不知道,我会检查出来......但仍然把问题广泛开放.

        我发现了这个问题:

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

        恰恰相反......但也许是一个好的开始？我不知道,我会检查出来......但仍然把问题广泛开放.

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

        如果我想"删除"并将其替换为表格..

        我不想做一张空桌子..

        这里是代码...也许不是"优化"但它起作用

        $('#texte').append('
        ');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();

        什么更好？

        不,不,因为问题/答案变得很好,插件很棒......但是不再适用了......

        这是错误...我喜欢在点击事件切换时调用插件(tablerize)并通过表替换整个UL ...它不做

        这是一小段代码:

        这并不奇怪它不起作用..我确定了一些东西...而且我没有运气来调整插件!...

        我真的很想保留这些代码: 

        $("texte").append('
        ');
$(#where_my_table_goes">
').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

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

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

好的..现在有州......

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

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

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

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

我迷路了!



1> Paolo Bergan..：

这是你如何做到的,如果你有这样的HTML:

    
    
  • Column A|Column B|Column C
    • 
    
  • Value A1|Value B1|Value C1
    • 
    
  • Value A2|Value B1|Value C2
    • 
    
  • Value A3|Value B1|Value C3
    • 
    
  • Value A4|Value B1|Value C4
    • 



    
    
  • Column D|Column E|Column F
    • 
    
  • Value D1|Value E1|Value F1
    • 
    
  • Value D2|Value E1|Value F2
    • 
    
  • Value D3|Value E1|Value F3
    • 
    
  • Value D4|Value E1|Value F4
    • 



    
    
  • Column G|Column H|Column I
    • 
    
  • Value G1|Value H1|Value I1
    • 
    
  • Value G2|Value H1|Value I2
    • 
    
  • Value G3|Value H1|Value I3
    • 
    
  • Value G4|Value H1|Value I4
    •

然后用jQuery你可以编写一个这样的插件:

jQuery.fn.tablerize = function() {
        return this.each(function() {
                var table = $('');
                var tbody = $('');
                $(this).find('li').each(function(i) {
                        var values = $(this).html().split('*');
                        if(i == 0) {
                                var thead = $('');
                                var tr = $('');
                                $.each(values, function(y) {
                                        tr.append($('');
                           $.each(values, function(y) {
                                   tr.append($('
').html(values[y]));
                                });
                                table.append(thead.append(tr));
                        } else {
                           var tr = $('
').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我写的插件需要一个