Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML
<!-- فونت وزیر -->
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />

<h2 style="text-align:center; font-family:Vazir, Tahoma; color:#333; font-weight:600; margin-top:20px;">
  مستندات اعتباربخشی
</h2>

<!-- فیلترهای زیبا -->
<div id="search-filters" style="
     display:flex; justify-content:center; flex-wrap:wrap; 
     gap:10px; margin:25px 0; direction:rtl;">

  <select id="filterAxis" onchange="updateSubAxis(); filterTable()"
          style="flex:0 1 160px; padding:10px 15px; border-radius:25px; 
          border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px;
          background:#fff; cursor:pointer;">
    <option value="">انتخاب محور</option>
    <option value="modiriyat">رهبری و مدیریت</option>
    <option value="mored">مراقبت و درمان</option>
    <option value="hemayat">حمایت از گیرنده خدمت</option>
  </select>

  <select id="filterSubAxis" onchange="filterTable()"
          style="flex:0 1 160px; padding:10px 15px; border-radius:25px; 
          border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px;
          background:#fff; cursor:pointer;">
    <option value="">انتخاب زیرمحور</option>
  </select>

</div>

<!-- جدول اصلی -->
<table id="myTable" border="1" cellpadding="5" cellspacing="0" 
style="border-collapse: collapse; width: 100%; margin-top: 10px; font-family:Vazir, Tahoma; direction:rtl;">
<thead style="background-color: #f2f2f2;">
<tr>
<th>محور</th>
<th>زیر محور</th>
<th>کمیته</th>
<th>عنوان سند</th>
<th>نوع سند</th>
<th>تاریخ آخرین بازنگری</th>
<th>تاریخ ویرایش</th>
<th>کد ویرایش</th>
</tr>
</thead>
<tbody>
<tr>
<td>رهبری و مدیریت</td>
<td>رهبری و مدیریت کیفیت</td>
<td>مثال 1</td>
<td>Word</td>
<td>2025-11-29</td>
<td>2025-11-28</td>
<td>001</td>
</tr>
<tr>
<td>مراقبت و درمان</td>
<td>مراقبت‌های عمومی بالینی</td>
<td>مثال 2</td>
<td>PDF</td>
<td>2025-11-28</td>
<td>2025-11-27</td>
<td>002</td>
</tr>
<tr>
<td>حمایت از گیرنده خدمت</td>
<td>احترام به حقوق گیرنده خدمت</td>
<td>مثال 3</td>
<td>Excel</td>
<td>2025-11-27</td>
<td>2025-11-26</td>
<td>003</td>
</tr>
</tbody>
</table>


<script>
// تعریف زیرمحورهای
<!-- ردیف‌ها توسط JS پر می‌شوند -->
</tbody>
</table>

<script>
// JSON داده‌ها
const documents = [
  {
    "axis":"رهبری و مدیریت",
    "subAxis":"رهبری و مدیریت کیفیت",
    "committee":"کمیته مدیریت کیفیت",
    "title":"مثال 1",
    "type":"Word",
    "lastRevision":"2025-11-29",
    "editDate":"2025-11-28",
    "editCode":"001"
  },
  {
    "axis":"مراقبت و درمان",
    "subAxis":"مراقبت‌های عمومی بالینی",
    "committee":"کمیته درمان",
    "title":"مثال 2",
    "type":"PDF",
    "lastRevision":"2025-11-28",
    "editDate":"2025-11-27",
    "editCode":"002"
  },
  {
    "axis":"حمایت از گیرنده خدمت",
    "subAxis":"احترام به حقوق گیرنده خدمت",
    "committee":"کمیته حقوق گیرنده خدمت",
    "title":"مثال 3",
    "type":"Excel",
    "lastRevision":"2025-11-27",
    "editDate":"2025-11-26",
    "editCode":"003"
  }
];

// زیرمحورها برای هر محور
const zirmohvarOptionssubAxisData = {
  "modiriyat": [
"رهبری و مدیریت کیفیت",
"مدیریت خطر، حوادث و بلایااستراتژیک",
"مدیریت منابع انسانی و سلامت حرفه‌ای",
"مدیریت خدمات پرستاری",
"فناوری و مدیریت اطلاعات سلامت",
"بهداشت محیط",
"مدیریت تجهیزات پزشکی"
],
mored: [
"مراقبت‌های عمومی بالینی",
"مراقبت‌های حاد و اورژانس",
"مراقبت‌های جراحی و بیهوشی",
"مراقبت‌های مادر و نوزاد",
"پیشگیری و کنترل عفونت",
"مدیریت دارویی",
"خدمات تصویربرداری",
"خدمات آزمایشگاه",
"طب انتقال خون",
"خدمات سرپایی"
],
hemayat: [
"تأمین تسهیلات برای گیرنده خدمت",
"احترام به حقوق گیرنده خدمت"
]
};

// تنظیم زیرمحورها پس از "],
  "mored": ["مراقبت‌های عمومی بالینی","ایمنی بیمار","مدیریت دارو"],
  "hemayat": ["احترام به حقوق گیرنده خدمت","آموزش گیرنده خدمت","رسیدگی به شکایات"]
};

// تابع پر کردن جدول
function populateTable() {
  const tbody = document.querySelector("#myTable tbody");
  tbody.innerHTML = ""; // پاک کردن قبل از پر کردن

  documents.forEach(doc => {
    const row = document.createElement("tr");

    row.innerHTML = `
      <td>${doc.axis}</td>
      <td>${doc.subAxis}</td>
      <td>${doc.committee}</td>
      <td>${doc.title}</td>
      <td>${doc.type}</td>
      <td>${doc.lastRevision}</td>
      <td>${doc.editDate}</td>
      <td>${doc.editCode}</td>
    `;

    tbody.appendChild(row);
  });
}

// بروزرسانی زیرمحورها هنگام انتخاب محور
function updateSubAxis() {
  const axis = document.getElementById("filterAxis").value;
  const subAxisSelect = document.getElementById("filterSubAxis");

  subAxisSelect.innerHTML = '<option`<option value="">همه</option>'>انتخاب زیرمحور</option>`;

  if (axis && zirmohvarOptionssubAxisData[axis]) {
zirmohvarOptions    subAxisData[axis].forEach(subitem => {
      const optionopt = document.createElement("option");
option      opt.value = subitem;
option      opt.textContent = subitem;
      subAxisSelect.appendChild(optionopt);
    });
  }
}

// فیلتر کردن جدول
function filterTable() {
  const axisfilterAxis = document.getElementById("filterAxis").value.trim();
  const subAxisfilterSubAxis = document.getElementById("filterSubAxis").value.trim();
  const trrows = document.querySelectorAll("#myTable tbody tr");

tr  rows.forEach(row => {
    const rowAxisaxis = row.childrencells[0].textContent.trim();
    const rowSubsubAxis = row.childrencells[1].textContent.trim();

    const axisMatch =
axis === "" !filterAxis || axis.includes(getAxisName(filterAxis));
    const subAxisMatch = !filterSubAxis || 
(axis === "modiriyat"subAxis.includes(filterSubAxis);

    row.style.display = (axisMatch && rowAxis ===subAxisMatch) ? "رهبری" و: مدیریت") ||
(axis === "mored" && rowAxis ==="none";
  });
}

// تبدیل کد محور به متن محور
function getAxisName(code) {
  switch (code) {
    case "modiriyat": return "رهبری و مدیریت";
    case "mored": return "مراقبت و درمان") ||
(axis ===;
    case "hemayat": && rowAxis === return "حمایت از گیرنده خدمت");

const  subMatch = subAxis ===default: return "";
 || rowSub === subAxis;

row.style.display = axisMatch && subMatch ? "" : "none" }
}

// اجرا هنگام لود صفحه
document.addEventListener("DOMContentLoaded", () => {
  populateTable();
});
}
</script>