تحويل قائمة غير مرتبة على طاولة مع جيس

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 على الصفحة.

لإضافة الجليد إلى الكعكة، واسمحوا فرزها من أكبر برنامج لأصغر!

---

لقد وجدت هذا السؤال:

كيفية تحويل جدول HTML إلى قائمة مع JQUERY؟

هو بالضبط العكس ... ولكن ربما بداية جيدة؟ أنا لا أعرف، سوف تحقق من ذلك ... ولكن لا يزال ترك السؤال مفتوح على نطاق واسع.

---

لقد وجدت هذا السؤال:

كيفية تحويل جدول HTML إلى قائمة مع JQUERY؟

هو بالضبط العكس ... ولكن ربما بداية جيدة؟ أنا لا أعرف، سوف تحقق من ذلك ... ولكن لا يزال ترك السؤال مفتوح على نطاق واسع.

---

سؤال آخر يتعلق بالحل ...

إذا أحب أن "حذف" واستبدلها بالجدول ..

أنا لا أحب أن أجعل طاولة فارغة ..

هنا هو الرمز ... ربما لا "الأمثل" ولكنه يعمل

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

أي شيء أفضل؟

---

لا لا لا، منذ أن أصبح السؤال / الإجابة والمكون الإضافي TI رائع ... ولكن لا يعمل بعد الآن ...

هنا هو الخطأ ... أحب أن استدعاء البرنامج المساعد (TEAPERIZE) عندما يكون الحدث Click هو تبديل واستبدال UL بواسطة الجدول ... الذي لا يفعله

هنا هو المقتطف الصغير من التعليمات البرمجية:

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

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

ليس من المستغرب أنها لا تعمل .. أنا المسمار شيء بالتأكيد ... وأنا tweek البرنامج المساعد بدون حظ! ...

أحب حقا الاحتفاظ بهذا الرمز:

$("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

هل احتاج حتى

مساعدة!

---

لا يعمل؛ هذه هي الصفحة الكاملة، ربما ستساعد كثيرا لمعرفة ما يجب القيام به

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

يمكنني استخدام التأخير لإخفاء فقط لمعرفة أن البيانات موجودة ...

بعد الضغط على العنوان .. يجب أن يحدث الإشجاع، حذف UL القديم وبرنامج تشغيله مع الجدول، و SlideToggle

---

حسنا .. هناك الدولة الآن ...

أعرف فقط تحرير إجابة ونشرها ... لا يوجد زر تحديث في أي مكان ..

أحب أن أعطيك الإبهام أو أي شيء يمكن أن يساعد تقييمك ... أنا فقط لا أعرف كيف

للمشكلة ... لدي ما بعد exacly ما تعطيه لي .. ولا تعمل ... دعونا نرى الرابط: 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();

يجب أن تعمل وأنت تنوي.

أيضا:

• لتحديث سؤالك، يمكنك فقط النقر فوق "تحرير" وإضافة كل ما تريد.
• لقبول إجابة، انقر فوق التحقق إلى يسار هذا النص.