Toggle基于復選框值的HTML表格行的可見性

我發現了大量關于基于復選框在表格中顯示/隱藏行的問題和答案，但未能找到我可以為我的場景作業的答案。

我的問題 - 我有一個 HTML 表格，其中每一行都有一個復選框，如果用戶發現該行很重要，則可以標記該復選框。我想要一個“主”復選框來切換表的行為 - 如果選中主，則僅顯示表上選中的行，如果未選中主，則顯示表的所有行。我需要用純 JS 來完成這個，沒有 JQuery。

任何幫助是極大的贊賞！

這是我一直用作測驗的一些示例 HTML 代碼...

<span class="text-default">
  <input type="checkbox" class="down-checkbox" id="down" />
  <label for="down">Check to show Flags only</label>
</span>
<table class="table1">
  <thead>
    <tr>
      <th>Flag</th>
      <th>No.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">ONE</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">TWO</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">THREE</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">FOUR</span></td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

這是一個例子

const rows = document.querySelectorAll(".table1 tbody tr")
document.getElementById("down").addEventListener("click",function() {
  rows.forEach(row => row.hidden = this.checked && !row.querySelector("input").checked)
})

<span class="text-default">
  <input type="checkbox" class="down-checkbox" id="down" />
  <label for="down">Check to show Flags only</label>
</span>
<table class="table1">
  <thead>
    <tr>
      <th>Flag</th>
      <th>No.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">ONE</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">TWO</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">THREE</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" />&nbsp;</td>
      <td><span class="whatever">FOUR</span></td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

const downCheckBox = document.querySelector("#down");
const checkBoxes = document.querySelectorAll(".table1 input[type=checkbox]");

downCheckBox.addEventListener("click", () => {
    for (checkbox of checkBoxes) {
        checkbox.parentNode.parentNode.hidden = downCheckBox.checked && !checkbox.checked;
    }
})

<span class="text-default">
    <input type="checkbox" class="down-checkbox" id="down" />
    <label for="down">Check to show Flags only</label>
</span>
<table class="table1">
    <thead>
        <tr>
            <th>Flag</th>
            <th>No.</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" />&nbsp;</td>
            <td><span class="whatever">ONE</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" />&nbsp;</td>
            <td><span class="whatever">TWO</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" />&nbsp;</td>
            <td><span class="whatever">THREE</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" />&nbsp;</td>
            <td><span class="whatever">FOUR</span></td>
        </tr>
    </tbody>
</table>

uj5u.com熱心網友回復：

在主選擇上運行一個事件監聽器，如果它被選中，則獲取表中選擇元素的選中值，并使用一個類將它們的顯示設定為無。

代碼片段中的解釋。

添加了一個選項，用于從選定串列中洗掉選中時選擇的元素down。

let down = document.getElementById('down');
let select = document.querySelectorAll('tr input[type="checkbox"]');

function isChecked(e) {
  // if event target #down, is checked run over 
  // each tr select and see which is checked
  if (e.target.checked) {
    select.forEach(checkBox => {
      // toggle classList for select that are NOT checked
      // add a helper class to add a display of none
      if (!checkBox.checked) {
        checkBox.closest('tr').classList.toggle('display-none')
      }
    })
  } else {
    // else if #down is not checked, remove all helper class of display none
    select.forEach(checkBox => {
      checkBox.closest('tr').classList.remove('display-none');
    })
  }
}
// optional for when you want to remove from the selected list while 
// parent #down is selected
// function to remove selected table rows when the main is selected
// and the target select is then unchecked
function removeUnchecked(e) {
  if (down.checked && !e.target.checked) {
    e.target.closest('tr').classList.add('display-none')
  }
}
// event listener for main select #down
down.addEventListener('change', isChecked);
// maybe you remove a tables check on a select while #down select is checked
select.forEach(sel => addEventListener('change', removeUnchecked));

.display-none {
  display: none;
}

<div class="parent-container">
  <span class="text-default">
    <input type="checkbox" class="down-checkbox" id="down" />
    <label for="down">Check to show Flags only</label>
  </span>
  <table class="table1">
    <thead>
      <tr>
        <th>Flag</th>
        <th>No.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" />&nbsp;</td>
        <td><span class="whatever">ONE</span></td>
      </tr>
      <tr>
        <td><input type="checkbox" />&nbsp;</td>
        <td><span class="whatever">TWO</span></td>
      </tr>
      <tr>
        <td><input type="checkbox" />&nbsp;</td>
        <td><span class="whatever">THREE</span></td>
      </tr>
      <tr>
        <td><input type="checkbox" />&nbsp;</td>
        <td><span class="whatever">FOUR</span></td>
      </tr>
    </tbody>
  </table>
</div>

uj5u.com熱心網友回復：

與其input.parentElement.parentElement讓祖先<tr>嘗試input.closest('tr')，不如說它體積更小，更容易閱讀。對表示的動態更改（而不是對 DOM 的更改）是.class受驅動的。#viewFlags選中時.hide應用于tr沒有選中復選框的 s，并且table被賦予.freeze類，因此選中時不能取消選中任何標志#viewFlags。

const loopRows = (NodeList, hide = false) => {
  NodeList.forEach(n => {
    if (n.checked && hide) {
      n.closest('tr').className = '';
    } else if (!n.checked && hide) {
      n.closest('tr').className = 'hide';
    } else {
      n.closest('tr').className = '';
    }
  })
};
      
const filterRows = e => {
  let chkAll = document.querySelectorAll('.chx');
  const vF = e.target;
  if (vF.checked) {
    vF.closest('table').className = 'freeze';
    loopRows(chkAll, true);
  } else {
    vF.closest('table').className = '';
    loopRows(chkAll);
  }
};

document.querySelector('#viewFlags').addEventListener('change', filterRows);

.hide {
  visibility: hidden
}

.chx span::before {
  content: '\0a\002690';
}

.chx:checked span::before {
  content: '\0a\002691'
}

.freeze .chx {
  pointer-events: none;
}

<table>
  <thead>
    <tr>
      <th>
         <input id='viewFlags' type="checkbox">
          <label type='checkbox'>?</label>
      </th>
      <th>No.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class='chx' type="checkbox"><span></span></td>
      <td>
        <div>ONE</div>
      </td>
    </tr>
    <tr>
      <td><input class='chx' type="checkbox"><span></span></td>
      <td>
        <div>TWO</div>
      </td>
    </tr>
    <tr>
      <td><input class='chx' type="checkbox"><span></span></td>
      <td>
        <div>THREE</div>
      </td>
    </tr>
    <tr>
      <td><input class='chx' type="checkbox"><span></span></td>
      <td>
        <div>FOUR</div>
      </td>
    </tr>
  </tbody>
</table>

標籤：

上一篇：日期格式化MongoDB，想要洗掉時區

下一篇：使用JS顯示計算的HTML輸出