چگونه ستون‌های خاصی را در یک جدول بچرخانیم؟

چگونه ستون‌های خاصی را در یک جدول با استفاده از CSS و JavaScript بچرخانیم؟

چرخاندن ستون‌های یک جدول می‌تواند یک چالش باشد، خصوصاً زمانی که می‌خواهید تنها ستون‌های خاصی را جابجا کنید. معمولاً در طراحی وب، کنترل عناصر به شکلی که با نیازهای کاربر بیشتر هماهنگ باشند، بخش مهمی از تجربه کاربری محسوب می‌شود. به همین دلیل وقتی نیاز به چرخاندن ستون‌ها داریم، باید به راه‌حل‌‌‌های ساده و کاربری فکر کنیم. این کار با استفاده از CSS و JavaScript امکان‌پذیر است و در اینجا قصد داریم به بررسی آن بپردازیم.

قبل از هر چیز، مهم است که ساختار HTML جدول خود را به خوبی بشناسیم. ستون‌ها در جدول با المان‌های th و td تعریف می‌شوند و با دسترسی به این المان‌ها می‌توانیم تغییراتی روی آن‌ها انجام دهیم. فرض کنیم که می‌خواهیم ستون سوم از جدول را چرخانده و نمایش دهیم.

برای این کار ابتدا باید مطمئن شویم که استایل‌های لازم را برای چرخش آماده‌ کرده‌ایم. این امر نیازمند داشتن یک کلاس CSS مخصوص برای چرخش است. همچنین جهت اینکه چرخش فقط بر روی ستون‌‌‌‌های خاص اعمال شود، می‌توانیم از یک اسکریپت JavaScript استفاده کنیم که این عمل را به صورت دینامیک انجام دهد.

در ادامه یک نمونه کد ارائه می‌دهیم که چگونه می‌توانید این عمل را با استفاده از CSS و JavaScript پیاده سازی کنید. این کد شامل یک جدول ساده است که قابلیت چرخش ستون‌ها را فراهم می‌کند.

    <table id="exampleTable">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
          <td>Row 1, Cell 3</td>
          <td>Row 1, Cell 4</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
          <td>Row 2, Cell 3</td>
          <td>Row 2, Cell 4</td>
        </tr>
      </tbody>
    </table>

    <style>
      .rotateColumn {
        transform: rotate(90deg);
        transform-origin: bottom left;
      }
    </style>

    <script>
      const table = document.getElementById('exampleTable');
      const rows = Array.from(table.rows);
      // Rotate the third column
      rows.forEach(row => {
        const cell = row.cells[2];
        if (cell) {
          cell.classList.toggle('rotateColumn');
        }
      });
    </script>
  

توضیح خط به خط کد

<table id="exampleTable"> : ایجاد یک جدول با شناسهٔ مشخص برای استفاده در جاوااسکریپت.

<thead> و <tbody> : بخش‌های هدر و بدنه جدول را مشخص می‌کنند.

.rotateColumn : کلاسی در CSS که برای چرخاندن سلول‌‌‌‌‌‌‌‌‌‌‌‌ اختصاص داده شده.

Array.from(table.rows) : تمامی سطرهای جدول را به صورت آرایه درمی‌آورد.

تابع toggle() از کلاس rotateColumn روی سلول‌‌‌‌‌ سوم در هر سطر اعمال می‌کند.