البرمجة

عرض صفيف في شبكة HTML

11/03/2024
3 دقيقة واحدة

To display the array of numbers in a grid in HTML, you can use a combination of HTML and CSS. Here’s a basic example to get you started:

html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Display Exampletitle>
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 1px;
    background-color: #ddd;
    padding: 5px;
  }

  .cell {
    background-color: white;
    border: 1px solid #bbb;
    padding: 10px;
    text-align: center;
  }

  .cell.shaded {
    background-color: #333;
    color: white;
  }
style>
head>
<body>
<div class="grid" id="grid">div>

<script>
  // Example array (replace this with your generated array)
  const array = [
    [1, 0, 1],
    [0, 1, 0],
    [1, 0, 1]
  ];

  const gridElement = document.getElementById("grid");

  // Loop through the array and create a grid of cells
  array.forEach(row => {
    row.forEach(cellValue => {
      const cell = document.createElement("div");
      cell.className = `cell ${cellValue ? 'shaded' : ''}`;
      cell.textContent = cellValue;
      gridElement.appendChild(cell);
    });
  });
script>
body>
html>

This code creates a grid layout using CSS Grid and then dynamically generates cells based on the array values, applying a shading style to cells with a value of 1. You can adjust the size and styling of the grid and cells to fit your needs.

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

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

html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Display Exampletitle>
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 1px;
    background-color: #ddd;
    padding: 5px;
  }

  .cell {
    background-color: white;
    border: 1px solid #bbb;
    padding: 10px;
    text-align: center;
  }

  .cell.shaded {
    background-color: #333;
    color: white;
  }
style>
head>
<body>
<div class="grid" id="grid">div>

<script>
  // Example array (replace this with your generated array)
  const array = [
    [1, 0, 1],
    [0, 1, 0],
    [1, 0, 1]
  ];

  const gridElement = document.getElementById("grid");

  // Loop through the array and create a grid of cells
  array.forEach(row => {
    row.forEach(cellValue => {
      const cell = document.createElement("div");
      cell.className = `cell ${cellValue ? 'shaded' : ''}`;
      cell.textContent = cellValue;
      gridElement.appendChild(cell);
    });
  });
script>
body>
html>

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

الوسوم
11/03/2024
3 دقيقة واحدة
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى