تغيير طلب العناصر الشبيهة بالجدول

Question

لدي مجموعة من divs تشبه الجدول (مع الصفوف والعقيد) ، لعرض جدول كرة القدم. الآن ، يجب أن أكون قادرًا على طلب هذا الجدول وفقًا للمفتاح الذي تم اختياره ، دون تحديث الصفحة وتجنب استخدام AJAX.

نظرًا لكونه أكثر تحديداً ، فأنا بحاجة إلى التقاط القيم الموجودة داخل كل "كولوم" Reveening للمفتاح الذي تم اختياره وإعادة ترتيب الجدول.

أستخدم jQuery ، لذلك يجب أن يكون العمل سهلاً إلى حد ما ، لست متأكدًا من كيفية إعادة طلب مجموعة مع معرف الفريق والعمود في السبب. بالمناسبة ، قيم الجدول هي رقمية.

فيما يلي مثال على الترميز (الصف):

<div class="rb">
        <div class="cname">Benfica</div>
        <div class="tdr bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold">0</div>
</div>

أي أفكار؟

Answer 1

لنفترض أنك حصلت على مجموعة من الكائنات ، حيث يتوافق كل كائن مع صف الجدول ، وكل كائن له خصائص مقابلة لأعمدة الجدول.

var table = [
   { rowId: 1, teamName: 'Man U', country: 'England' },
   { rowId: 2, teamName: 'FC Barcelona', country: 'Spain' }
];

الآن ، إذا قمت بترتيب بياناتك مثل هذا ، فيمكنك إنشاء وظيفة حيث يمكنك القول فقط drawTable(table) وسيقوم بإنشاء علامة HTML التي تريدها. يمكنك بعد ذلك القيام بالفرز في هذا المتغير ، مثل هذا:

function sortTable(table, column) {
    table.sort(function(x,y) { return x[column] > y[column]; });
    return table;
}

$('#sortByTeamName').click(function() {
   table = sortTable(table, 'teamName');
   drawTable(table);
});