فرز بيانات جافا سكريبت في جدول HTML

15/03/2024

3 2 دقائق

مشكلتك تكمن في ترتيب عمليتي إنشاء الجدول وإضافة العناصر إليه داخل دالة الفرز sort()، حيث تقوم بتعيين سمات الجدول وإضافة الصفوف والخلايا داخل الدالة دون استكمال تنفيذ الدالة. يجب عليك ترتيب هذه العمليات بشكل صحيح. سأقدم لك تصحيحًا للكود بالتفصيل:

أولاً، يجب عليك إعداد الدالة التي تقوم بإنشاء الجدول وإضافة الصفوف والخلايا داخلها قبل استدعاء دالة الفرز sortarray().

php
html>
<html>
<body>

<button onclick="sortarray('name')">Sort by Namebutton>
<button onclick="sortarray('year')">Sort by Yearbutton>

<p id="demo">testp>

<table id="resultTable" border="1" width="100%">table>

<script>
var array = [
    {
        name: 'TK345',
        year: 2011,
        custom: 456,
        colour: 'red'
    },
    {
        name: 'ZJ456',
        year: 2001,
        custom: 96,
        colour: 'black'
    },
    {
        name: 'AW364',
        year: 1985,
        custom: 1,
        colour: 'cyan'
    },
    {
        name: 'RT112',
        year: 2012,
        custom: 33,
        colour: 'green'
    },
    {
        name: 'PO445',
        year: 2012,
        custom: 11,
        colour: 'yellow'
    }
];

function createTable(data) {
    var table = document.getElementById('resultTable');
    table.innerHTML = ''; // Clear previous table content

    // Create header row
    var headerRow = table.insertRow(0);
    for (var key in data[0]) {
        var headerCell = headerRow.insertCell();
        headerCell.appendChild(document.createTextNode(key));
    }

    // Create data rows
    data.forEach(function(item) {
        var row = table.insertRow();
        for (var key in item) {
            var cell = row.insertCell();
            cell.appendChild(document.createTextNode(item[key]));
        }
    });
}

function sortarray(sorter) {
    var sortedArray = array.slice(0); // Clone the original array

    if (sorter === 'name') {
        sortedArray.sort(function(a, b) {
            var x = a.name.toLowerCase();
            var y = b.name.toLowerCase();
            return x < y ? -1 : x > y ? 1 : 0;
        });
    } else if (sorter === 'year') {
        sortedArray.sort(function(a, b) {
            return a.year - b.year;
        });
    }

    createTable(sortedArray);
}

// Initialize table with unsorted data
createTable(array);
script>

body>
html>

قمت بإعادة ترتيب الكود بحيث يتم إنشاء الجدول وإضافة الصفوف والخلايا داخل دالة createTable()، ثم قمت بتحديث دالة sortarray() لتقوم بإنشاء الجدول بعد عملية الفرز وعرض النتائج بشكل صحيح. هذا التنظيم يجعل الكود أكثر وضوحًا وسهولة قراءة وصيانة.

المزيد من المعلومات

مقالات ذات صلة

فهم وتحسين استخدام jQuery للنقر والحصول على البيانات

تحكم في زر الطباعة بواسطة JavaScript

تطوير بوتات تليجرام باستخدام Python

تطبيق تحويل مصفوفة في R