根據單選按鈕選擇顯示/隱藏HTML表格列

Question

我有一個HTML表，該表顯示來自數據庫的三種不同MySQL條件的數據。 我想為一個單選選項隱藏一列。 我到處環顧了很多，但沒有達到目的。 任何建議或幫助將不勝感激。

這是顯示數據的HTML表

<thead>
  <tr>
  <th>S.No.</th>
  <th>Email ID</th>
  <th>SBI Employee ID</th>
  <th>Name</th>
  <th>Mobile No.</th>
  <th>Date of Birth</th>
  <th>Registration Date</th>
  <th>Check for Approval 
       <input type="checkbox" id="select_all" name="all_check[]" <?php echo $disabled ;?> class="checkbox" value= "<?php echo $row['id']; ?>"> </th></tr>
 </thead>

現在我有我的MySQL查詢，

switch ($users)
        {
        case "all":
          $sqlQuery = "SELECT * FROM tbl_user WHERE type =3";
        break;
        case "approved":
           $sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =1";
        break;
        case "unapproved":
          $sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =0";
        break;
      }

現在收音機

 <input type='radio'  name='users' value='unapproved' <?php if (isset($_POST['users']) && $_POST['users'] == 'unapproved')  echo ' checked="checked"';?> checked /> Unapproved Candidates<br> 
          <input type='radio'  name='users' value='approved' <?php if (isset($_POST['users']) && $_POST['users'] == 'approved') echo ' checked="checked"';?> / > Approved Candidates<br>
          <input type='radio' id='show' name='users' value='all'  <?php if (isset($_POST['users']) && $_POST['users'] == 'all')  echo ' checked="checked"';?> /> All Candidates<br><br> 
          <input type="submit" value="submit" id="submit"><br><br>

我想要做的是隱藏“所有候選人”單選的“檢查批准”列，並在其中為“批准的用戶”選擇禁用復選框字段。 我是php的新手，但仍然對此感到疑惑，因為直到現在我才知道它只能由jquery完成。 請原諒我在這里犯的錯誤，但正在尋找解決方案。 謝謝

Answer 1

我發現了這個示例，該示例基本上根據復選框狀態隱藏/取消隱藏表行

 .expandable { display: none; } #isexpanded:checked ~ * tr.expandable { display: table-row; background: #cccccc; } #isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { display: block; background: #cccccc; }

 <body> <input type="checkbox" id="isexpanded" />Hide/Unhide <h1>Expandable elements</h1> <table> <thead> <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> </tbody> </table> </body>

Answer 2

您的解決方案可以是簡單的JavaScript ，而不必是JQuery 。

UPDATED ：實時小提琴-已更新（用於連續DOM更新）

這是解決方案的演示，現場演奏（更改用戶值以查看結果）

或者只是檢查代碼：

<!-- put this at the end, before </body> -->
<script>
// set users via PHP
var users = "<?php if (isset($_POST['users'])) echo $_POST['users']; ?>";
// update the HTML without interfering with other scripts
(function(users){
  // check if PH
  if (users.length) {
    // update the radio option...
    var inputTag = document.querySelector('input[value="'+users+'"]');
    if (inputTag)
      inputTag.checked = true;
    // if users is "all"
    // hide the last TD of every column
    if (users == "all") {
      var lastTh = document.querySelector('tr th:last-child');
      lastTh.style.display = "none";
      var allLastTds = document.querySelectorAll('td:last-child');
      for (var i = 0; i< allLastTds.length; i++) {
        allLastTds[i].style.display="none";
      }
    }
    // if users is "approved"
    // make the checkbox disabled
    if (users == "approved") {
      thInputTag = document.getElementById("select_all");
      thInputTag.setAttribute("disabled", true);
    }
  }
})(users);
</script>

另外，您可以重寫此部分（無需PHP）：

<input type='radio'  name='users' value='unapproved' /> Unapproved Candidates<br> 
<input type='radio'  name='users' value='approved' /> Approved Candidates<br>
<input type='radio' id='show' name='users' value='all'  /> All Candidates<br><br> 
<input type="submit" value="submit" id="submit"><br><br>

根據單選按鈕選擇顯示/隱藏HTML表格列

問題描述

2 個解決方案

解決方案1
0 2017-07-26 07:07:51

解決方案2
0 已采納 2017-07-26 09:36:34

根據單選按鈕選擇顯示/隱藏HTML表格列

問題描述

2 個解決方案

解決方案1 0 2017-07-26 07:07:51

解決方案2 0 已采納 2017-07-26 09:36:34

解決方案1
0 2017-07-26 07:07:51

解決方案2
0 已采納 2017-07-26 09:36:34