Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML
<!-- فیلترها -->
<label for="filterAxis">محور:</label>
<select id="filterAxis" onchange="updateSubAxis(); filterTable()">
<option value="">همه</option>
<option value="modiriyat">رهبری و مدیریت</option>
<option value="mored">مراقبت و درمان</option>
<option value="">همه<hemayat">حمایت از گیرنده خدمت</option>
</select>

<label for="filterSubAxis">زیر محور:</label>
<select id="filterSubAxis" onchange="filterTable()">
  <option value="">همه</option>
</select>

<!-- جدول -->
<table id="myTable" border="1" cellpadding="5" cellspacing="0" 
style="border-collapse: collapse; width: 100%; margin-top: 10px;">
  <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>رهبری      <td>محور 1<و مدیریت</td>
<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>مراقبت      <td>محور 2<و درمان</td>
<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>حمایت از     <td>محور 3<گیرنده خدمت</td>
<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</td>
      <td>Word</td>
      <td>2025-11-26</td>
      <td>2025-11-25</td>
      <td>004</td>
    </tr>
  </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);
  }
  
  var axisSelect</tbody>
</table>

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

// تنظیم زیرمحورها پس از انتخاب محور
function updateSubAxis() {
const axis = document.getElementById("filterAxis");
  axisSet.forEach(function(value){
    var option value;
const subAxisSelect = document.createElementgetElementById("optionfilterSubAxis");

subAxisSelect.innerHTML =  '<option option.value = value;
    option.text = value;
    axisSelect.appendChild(option);
  });
  
  var subAxisSelect = document.getElementById("filterSubAxis");
  subAxisSet.forEach(function(value){
    var ="">همه</option>';

if (axis && zirmohvarOptions[axis]) {
zirmohvarOptions[axis].forEach(sub => {
const option = document.createElement("option");
    option.value = valuesub;
    option.texttextContent = valuesub;
    subAxisSelect.appendChild(option);
  });
}
}

// فیلتر کردن جدول
function filterTable() {
const  var axis = document.getElementById("filterAxis").value;
const  var subAxis = document.getElementById("filterSubAxis").value;
const  vartr table = document.getElementByIdquerySelectorAll("myTable");
#myTable tbody var tr = table.getElementsByTagName("tr");
  
  for (var i
tr.forEach(row = 1; i < tr.length; i++) > {
const    var tds rowAxis = trrow.children[i0].textContent.getElementsByTagNametrim("td");
const rowSub   var axisText = tdsrow.children[01].textContent.trim();

const axisMatch   var subAxisText = tds[1].textContent;
    
    if ((axis 
axis === "" || 
(axis === "modiriyat" && rowAxis === "رهبری و مدیریت") ||
(axis axisText === axis)"mored" && (subAxisrowAxis === "مراقبت و درمان") || subAxisText
(axis === subAxis)) {
      tr[i].style.display = "";
    } else {
      tr[i]"hemayat" && rowAxis === "حمایت از گیرنده خدمت");

const subMatch = subAxis === "" || rowSub === subAxis;

row.style.display = "none";
    }
  }
}

// اجرا هنگام بارگذاری صفحه
populateFilters();axisMatch && subMatch ? "" : "none";
});
}
</script>