اذهب إلى المحتوى
  • 0

عرض نتائج البحث باستخدام رقم الجلوس من ملف Excel على موقع الويب باستخدام JavaScript

وديعة الله

السؤال

صممت موقع ويب ونبى نعرض النتيجه بالبحث برقم الجلوس من ملف اكسل 

نبى كود جافا 

وبارك الله فيكم

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

اعتقد انك تقصدين جافاسكريبت وليس جافا، وذلك لأن جافا لن تعمل على المتصفح، ويمكنك عرض البيانات باستخدام الـ js عن طريق مكتبة مثل SheetJS  وهذا مثال بسيط عن كيفية فعل ذلك :

<!DOCTYPE html>
<html>
  <head>
    <title>Excel to Table</title>
    <!-- تعريف قواعد CSS لتنسيق الجدول وتغيير خلفية الصفحة والجدول ولون الخطوط -->
    <style>
      body {
        background-color: black;
      }

      table {
        width: 100%;
        background-color: black;
        color: #fff;
        margin-top: 1em;
      }

      td {
        border: 1px solid red;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <!-- إنشاء عنصر input من نوع file وتحديد نوع الملفات المسموح بها -->
    <input type="file" id="input" accept=".xls,.xlsx" />
    <!-- تضمين مكتبة SheetJS باستخدام عنصر script ورابط CDN -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
    <script>
      // إنشاء مستمع لحدث change على عنصر الإدخال
      const input = document.getElementById('input');
      input.addEventListener('change', handleFileSelect);

      // دالة للتعامل مع الملف المحدد
      function handleFileSelect(event) {
        // قراءة الملف المحدد باستخدام FileReader
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
          // قراءة البيانات من الملف باستخدام SheetJS
          const data = e.target.result;
          const workbook = XLSX.read(data, {type: 'binary'});
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          // تحويل البيانات إلى مصفوفة من الصفوف
          const rows = XLSX.utils.sheet_to_json(sheet, {header: 1});
          // إنشاء جدول HTML وإضافة الصفوف والخلايا إليه
          createTable(rows);
        };
        reader.readAsBinaryString(file);
      }

      // دالة لإنشاء جدول HTML وإضافة الصفوف والخلايا إليه
      function createTable(rows) {
        const table = document.createElement('table');
        rows.forEach(function(row) {
          const tr = document.createElement('tr');
          row.forEach(function(cell) {
            const td = document.createElement('td');
            td.textContent = cell;
            tr.appendChild(td);
          });
          table.appendChild(tr);
        });
        document.body.appendChild(table);
      }
    </script>
  </body>
</html>

 

 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

ما فهمته هو أنك تريدين عرض النتائج بحسب رقم الجلوس من ملف Excel في موقع الويب باستخدام JavaScript، ولفعل ذلك يلزم استخدام مكتبة تعامل مع ملفات Excel مثل xlsx أو exceljs.

وإليك مثال:

أولاً عليك تضمين مكتبة xlsx في صفحة HTML كالتالي:

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

ثم إنشاء واجهة مستخدم بسيطة لإدخال رقم الجلوس وزر البحث في ملف HTML أيضًا:

<input type="text" id="seatNumber" placeholder="رقم الجلوس">
<button onclick="searchResult()">ابحث</button>

وإضافة وظيفة searchResult() إلى النص البرمجي للصفحة للقيام بالبحث وعرض النتيجة:

const searchResult = async () => {
  const seatNumber = document.getElementById('seatNumber').value;

  try {
    const response = await fetch('path/to/your/excel/file.xlsx');
    const arrayBuffer = await response.arrayBuffer();

    const data = new Uint8Array(arrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });

    // قم بقراءة ورقة العمل الأولى
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // حول البيانات إلى كائن JSON
    const jsonData = XLSX.utils.sheet_to_json(worksheet);

    // البحث عن رقم الجلوس
    const result = jsonData.find(row => row['رقم الجلوس'] === seatNumber);

    // عرض النتيجة
    if (result) {
      alert('تم العثور على الجلوس!');
      console.log(result);
    } else {
      alert('لم يتم العثور على الجلوس!');
    }
  } catch (error) {
    console.error(error);
  }
};

ولكي يعمل السكريبت عليك بتضمينه بعد استيراد مكتبة XLSX كالتالي:

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script defer src="index.js"></script>

وقمت باستخدام خاصية defer من أجل ضمان تشغيل السكريبت بعد تحميل عناصر HTML.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

رغم أن المرجح هو ما أشار اليه عمر ومصطفى في التعليقات السابقة بخصوص جافاسكربت بدل جافا كفلترة على الواجهة الأمامية، إلا أنك ان كنت تستخدم جافا كلغة واجهة خلفية وتريد التعامل مع عملية الفلترة من المكتبة الخلفية، يمكنك استخدام مكتبة Apache POI للتعامل مع ملفات Excel في Java. هنا هو مثال بسيط لكيفية قراءة ملف Excel وعرض النتيجة باستخدام رقم الجلوس:

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;

import java.io.FileInputStream;
import java.io.IOException;

public class ExcelReader {
    public static void main(String[] args) {
        String filePath = "path/to/your/excel/file.xlsx";
        String searchValue = "12345"; // رقم الجلوس المطلوب البحث عنه

        try (FileInputStream fileInputStream = new FileInputStream(filePath);
             Workbook workbook = new XSSFWorkbook(fileInputStream)) {

            Sheet sheet = workbook.getSheetAt(0); // استخراج ورقة العمل الأولى

            for (Row row : sheet) {
                Cell cell = row.getCell(0); // استخراج الخلية الأولى في كل صف (قم بتعديلها حسب هيكل ملف Excel الخاص بك)
                String value = cell.getStringCellValue();

                if (value.equals(searchValue)) {
                    // تم العثور على النتيجة المطلوبة
                    System.out.println("تم العثور على النتيجة!");
                    // يمكنك عرض البيانات الأخرى في الصف حسب احتياجاتك
                    // مثلاً: Cell otherCell = row.getCell(1);
                    // String otherValue = otherCell.getStringCellValue();
                    // System.out.println("قيمة أخرى: " + otherValue);
                    break;
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

قم بوضع رقم الجلوس كقيمة للمتغير searchValue ومسار الملف مكان filePath وشغل البرنامج.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

بالطبع! يمكنك استخدام JavaScript لقراءة بيانات Excel وعرض النتيجة بناءً على رقم الجلوس. يتطلب ذلك استخدام مكتبة JavaScript لقراءة ملفات Excel مثل xlsx أو SheetJS، والتلاعب بالبيانات المستخرجة. هنا مثال بسيط يستخدم مكتبة SheetJS لقراءة ملف Excel وعرض النتيجة:

<!DOCTYPE html>
<html>
<head>
  <title>قراءة ملف Excel باستخدام JavaScript</title>
  <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
  <input type="file" id="excel-file" accept=".xlsx" />
  <button onclick="searchResult()">بحث</button>
  <div id="result"></div>

  <script>
    function searchResult() {
      var input = document.getElementById('excel-file');
      var file = input.files[0];
      var reader = new FileReader();

      reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, {type: 'array'});
        var worksheet = workbook.Sheets[workbook.SheetNames[0]];

        // تحديد الخلية التي تحتوي على رقم الجلوس (على سبيل المثال، الخلية A1)
        var cell = worksheet.A1;
        var seatNumber = cell ? cell.v : '';

        // عرض النتيجة
        var resultElement = document.getElementById('result');
        resultElement.textContent = 'رقم الجلوس: ' + seatNumber;
      };

      reader.readAsArrayBuffer(file);
    }
  </script>
</body>
</html>

في هذا المثال، يتم إنشاء إدخال ملف لتحديد ملف Excel، ثم يتم تعيين دالة searchResult() كمعالج لزر البحث. عند النقر على الزر، يتم قراءة محتويات الملف باستخدام FileReader ومكتبة xlsx، ثم يتم استخراج قيمة الخلية التي تحتوي على رقم الجلوس وعرضها في عنصر النتيجة.

يرجى ملاحظة أن هذا مثال بسيط يستخدم مكتبة SheetJS لقراءة الملفات، وقد تحتاج إلى تعديله وفقًا لاحتياجات مشروعك. كما يجب تضمين مكتبة xlsx في صفحة HTML الخاصة بك عن طريق استخدام عنصر النص <script> ووضع الرابط الصحيح لملف xlsx.full.min.js.

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

انا طالبة ...ونخدم في مشروع تخرج 

اى صح نقصد جافا سكيبت 

جزاكم الله خير ع الرد ...واذا ممكن حد منكم يخليلى رقمه تلواتس نتواصل معه حتى نكمل مشروعى نكون ممنونة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...