根据单选按钮选择显示/隐藏HTML表格列

时间:2017-07-26 05:49:59

标签: php jquery checkbox radio-button

我有一个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来完成。请原谅我在这里遇到的错误,但要寻找解决方案。谢谢

2 个答案:

答案 0 :(得分:0)

我发现这个示例基本上隐藏/取消隐藏表行,具体取决于复选框状态

&#13;
&#13;
.expandable {
    display: none;
}

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

#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您的解决方案可以很简单JavaScript,不一定是JQuery

更新Live fiddle - updated(用于持续更新DOM)

以下是解决方案Live fiddle的演示(更改用户值以查看结果)

或者只是查看代码:

<!-- 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>