jQuery가있는 테이블에 정렬되지 않은 목록을 돌립니다

Question

나는 얻는 것을 좋아한다 <ul><li> 그리고 CSS와 함께 스타일을 지정할 멋진 테이블로 만드십시오.

나는 jQuery로 만들어지는 변형이 마음에 듭니다

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

온다 ....

그리고 첫 번째 줄로 테이블 헤드를 만듭니다. <ul> 그리고 다른 사람들과 테이블 셀 ...

아마도 4-5가있을 것입니다 <ul>페이지에 s.

케이크에 착빙을 추가하려면 가장 큰 소득자에서 가장 작은 소득자로 분류하십시오!

---

나는이 질문을 발견했다 :

jQuery로 나열되도록 HTML 테이블을 변환하는 방법은 무엇입니까?

정확히 반대입니다 ...하지만 좋은 출발일까요? 모르겠습니다. 확인하겠습니다. 그러나 여전히 질문을 널리 열어 두었습니다.

---

나는이 질문을 발견했다 :

jQuery로 나열되도록 HTML 테이블을 변환하는 방법은 무엇입니까?

정확히 반대입니다 ...하지만 좋은 출발일까요? 모르겠습니다. 확인하겠습니다. 그러나 여전히 질문을 널리 열어 두었습니다.

---

솔루션과 관련된 또 다른 질문 ...

내가 "삭제"하고 테이블로 교체하고 싶다면 ..

나는 빈 테이블을 만드는 것을 좋아하지 않는다 ..

여기에 코드가 있습니다 ... 아마 "최적화되지 않았을 수도 있지만 작동합니다.

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

더 나은 것이 있습니까?

---

아니요 아니요, 질문/답변이 시작되고 플러그인이 훌륭하지만 더 이상 작동하지 않기 때문에 ...

버그는 다음과 같습니다 ... 클릭 이벤트가 테이블로 전체 UL을 전환하고 교체 할 때 플러그인 (TableRize)을 호출하고 싶습니다.

코드의 작은 스 니펫은 다음과 같습니다.

<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을 삭제하고 테이블과 함께 렌더링하고 SlidEtoggle

---

OK .. 지금 상태가 있습니다 ...

답을 편집하고 게시하는 것만 알고 있습니다 ... 어느 곳에서나 업데이트 버튼이 없습니다 ..

나는 당신에게 엄지 손가락을 주거나 당신의 평가에 도움이 될 수있는 것을 좋아합니다 ... 나는 단지 방법을 모른다

문제를 위해 ... 나는 당신이 나에게주는 것을 외분진 게시했습니다. 그리고 그것은 작동하지 않습니다 ... 링크를 보자 : http://www.acecrodeo.com/new/04-classement.php

여기 버그는 다음과 같습니다. 헤더를 전환합니다 ...

나는 너무 길을 잃었다!

Answer 1

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

의도 한대로 작동해야합니다.

또한:

• 질문을 업데이트하려면 '편집'을 클릭하고 원하는 것을 추가하십시오.
• 답을 받아들이려면이 텍스트의 왼쪽에있는 수표를 클릭합니다.