Page History

<!-- فیلترهافونت وزیر -->
<label for="filterAxis">محور:</label>
<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>
</select>

<label for="filterSubAxis">زیر محور:</label>
    <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=">
<thead>
<tr>
<th>محور</th>
<th>زیر محور</th>
<th>کمیته</th>
<th>عنوان سند</th>
<th>نوع سند</th>
<th>تاریخ آخرین بازنگری</th>
<th>تاریخ ویرایش</th>
<th>کد ویرایش</th>
</tr>
</thead>
<tbody>
<!-- ردیف‌ها توسط JS پر می‌شوند -->
</tbody>
</table>

<!-- CSS جدول زیبا -->
<style>
#myTable {
  border-collapse: collapse; separate;
  border-spacing: 0;
  width: 100%;
 margin font-topfamily: 10px;">Vazir, Tahoma;
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th>محور</th>
      <th>زیر محور</th>
      <th>عنوان سند</th>
      <th>نوع سند</th>
      <th>تاریخ آخرین بازنگری</th>
      <th>تاریخ ویرایش</th>
      <th>کد ویرایش</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>محور 1</td>
      <td>زیر محور 1</td>
      <td>مثال عنوان 1</td>
      <td>Word</td>
      <td>2025-11-29</td>
      <td>2025-11-28</td>
      <td>001</td>
    </tr>
    <tr>
      <td>محور 2</td>
      <td>زیر محور 2</td>
      <td>مثال عنوان 2</td>
      <td>PDF</td>
      <td>2025-11-28</td>
      <td>2025-11-27</td>
      <td>002</td>
    </tr>
    <tr>
      <td>محور 3</td>
      <td>زیر محور 3</td>
      <td>مثال عنوان 3</td>
      <td>Excel</td>
      <td>2025-11-27</td>
      <td>2025-11-26</td>
      <td>003</td>
    </tr>
    <tr>
      <td>محور 1</td>
      <td>زیر محور 2</td>
      <td>مثال عنوان 4<direction: rtl;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}
#myTable thead th {
  background-color: #f2f2f2;
  padding: 10px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
#myTable tbody td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
#myTable tbody tr:nth-child(even) {
  background-color: #fafafa;
}
#myTable tbody tr:hover {
  background-color: #e6f7ff;
  transition: background-color 0.3s;
}
#myTable thead tr:first-child th:first-child { border-top-right-radius: 10px; }
#myTable thead tr:first-child th:last-child { border-top-left-radius: 10px; }
#myTable tbody tr:last-child td:first-child { border-bottom-right-radius: 10px; }
#myTable tbody tr:last-child td:last-child { border-bottom-left-radius: 10px; }
#search-filters select { transition: all 0.3s; }
#search-filters select:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
</style>

<!-- JS داینامیک جدول و فیلتر -->
<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:"مثال 4", type:"PDF", lastRevision:"2025-11-25", editDate:"2025-11-24", editCode:"004" },
  { axis:"مراقبت و درمان", subAxis:"مراقبت‌های عمومی بالینی", committee:"کمیته درمان", title:"مثال 2", type:"PDF", lastRevision:"2025-11-28", editDate:"2025-11-27", editCode:"002" },
  { axis:"مراقبت و درمان", subAxis:"پیشگیری و کنترل عفونت", committee:"کمیته بهداشت", title:"مثال 5", type:"Word", lastRevision:"2025-11-26", editDate:"2025-11-25", editCode:"005" },
  { axis:"حمایت از گیرنده خدمت", subAxis:"تأمین تسهیلات برای گیرنده خدمت", committee:"کمیته پشتیبانی", title:"مثال 3", type:"Excel", lastRevision:"2025-11-27", editDate:"2025-11-26", editCode:"003" },
  { axis:"حمایت از گیرنده خدمت", subAxis:"احترام به حقوق گیرنده خدمت", committee:"کمیته حقوق گیرنده خدمت", title:"مثال 6", type:"PDF", lastRevision:"2025-11-24", editDate:"2025-11-23", editCode:"006" }
];

// پر کردن جدول
function populateTable() {
  const tbody = document.querySelector("#myTable tbody");
  tbody.innerHTML = "";
  documents.forEach(doc => {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${doc.axis}</td>
      <td>Word<<td>${doc.subAxis}</td>
      <td>2025-11-26<<td>${doc.committee}</td>
      <td>2025-11-25<<td>${doc.title}</td>
      <td>004<<td>${doc.type}</td>
    </tr>
  <td>${doc.lastRevision}</tbody>
</table>

<!-- اسکریپت فیلتر پویا -->
<script>
// پر کردن Dropdownها بر اساس مقادیر جدول
function populateFilters() {
  var table = document.getElementById("myTable");
  var axisSet = new Set();
  var subAxisSet = new Set();
  
  var tr = table.getElementsByTagName("tr");
  for (var i = 1; i < tr.length; i++) {
    var tds = tr[i].getElementsByTagName("td");
    axisSet.add(tds[0].textContent);
    subAxisSet.add(tds[1].textContent);
  }
  
  vartd>
      <td>${doc.editDate}</td>
      <td>${doc.editCode}</td>
    `;
    tbody.appendChild(tr);
  });
}

// استخراج زیرمحورها از داده‌ها
function getSubAxes(axis) {
  return documents
    .filter(doc => doc.axis === axis)
    .map(doc => doc.subAxis)
    .filter((v, i, a) => a.indexOf(v) === i);
}

// پر کردن زیرمحورها هنگام انتخاب محور
function updateSubAxis() {
  const axisSelect = document.getElementById("filterAxis");
  axisSet.forEach(function(value){
    var option const subAxisSelect = document.createElementgetElementById("optionfilterSubAxis");
  const axisText option.value = valueaxisSelect.options[axisSelect.selectedIndex].text;
    optionsubAxisSelect.textinnerHTML = '<option value="">همه</option>';

  if  axisSelect.appendChild(optionaxisText);
  }); {
  
  varconst subAxisSelectsubs = document.getElementById("filterSubAxis"getSubAxes(axisText);
  subAxisSet  subs.forEach(function(value)sub => {
    var  const option = document.createElement("option");
      option.value = valuesub;
      option.texttextContent = valuesub;
      subAxisSelect.appendChild(option);
    });
  }
}

// فیلتر کردن جدول
function filterTable() {
  varconst axisaxisSelect = document.getElementById("filterAxis").value;
  varconst subAxissubAxisSelect = document.getElementById("filterSubAxis").value;
  varconst tableaxisText = document.getElementById("myTable")axisSelect.options[axisSelect.selectedIndex].text;
  varconst trsubText = table.getElementsByTagName("tr")subAxisSelect.value;
  
const rows for= document.querySelectorAll(var"#myTable i = 1; i < tr.length; i++)tbody tr");

  rows.forEach(row => {
    varconst tdsrowAxis = trrow.children[i0].textContent.getElementsByTagNametrim("td");
    varconst axisTextrowSub = tds[0].textContent;
    var subAxisText = tdsrow.children[1].textContent.trim();
    
const axisMatch = !axisText if ((axis|| rowAxis === "" || axisText === axis) && (subAxis === ""axisText;
    const subMatch = !subText || subAxisTextrowSub === subAxis)) {subText;
      tr[i]row.style.display = "";
    } else {
      tr[i].style.display = axisMatch && subMatch ? "" : "none";
    });
  }
}

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