logo标签列表

如何根据下拉菜单隐藏/显示表格中的单元格

javascriptjqueryhtmlcss
3

我创建了一个包含5或6个td的表格。表格中的数据是由3个下拉菜单和一个“Go”按钮生成的。当我在这三个下拉菜单中设置了值后，它会在表格中显示结果。 但问题是，如果我没有选择一个或两个下拉菜单中的值并将其设置为null，则不应该在表格中显示该列。我正在尝试使用JavaScript解决，但我不知道如何做。 以下是我的HTML代码：

$(document).ready(function() {
  $("#go").click(function() {
    var select1 = document.getElementById("select1").value;
    var select2 = document.getElementById("select2").value;
    var select3 = document.getElementById("select3").value;;
  });

  if (select1 == null) {
    document.getElementByClass('select1td').style.display = none;
  }
  if (select2 == null) {
    document.getElementByClass('select2td').style.display = none;
  }
});
<select id="select1" name="select1" style="width: 190px; display: block;">
  <option selected value="" disabled="disabled">Select an option</option>
  <?php 
    $sql="SELECT DISTINCT name FROM tbl1 ";
            
    $result = mysql_query($sql);

    while ($row = mysql_fetch_array($result)) {
        
        echo "<option  class='name' value=' " . $row['name'] ."'>" . $row['name'] ."</option>";
        }
    ?>
</select>
<label>Lot Name</label>
<select id="select2" name="select2" style="width: 190px; display: block;">
  <option selected value="" disabled="disabled">Select an option</option>
  <?php 
    $sql="SELECT DISTINCT course FROM tbl1 ";
            
    $result = mysql_query($sql);

    while ($row = mysql_fetch_array($result)) {
        
        echo "<option  class='course' value=' " . $row['course'] ."'>" . $row['course'] ."</option>";
        }
    ?>
</select>

<!-- and also a third drop down menu-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="select1td">
      <?php echo $row["name"]; ?>
    </td>
    <td class="select2td">
      <?php echo $row["course"]; ?>
    </td>
    <td class="select3td">
      <?php echo $row["reg"]; ?>
    </td>
</table>

我必须展示如果(select==null){那么将该td即列显示为none}。 - stcara
1
请考虑使用MySQLi或PDO扩展。旧版的MySQL扩展已被弃用，不建议使用。 - ths
3个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
4

我将您的原始JavaScript代码更改为jQuery。您可以使用if（myvalue）检查空值。这是有效的，因为JavaScript将空字符串的值视为false。 您也可以执行if（myvalue！==“”），这将检查myvalue是否不是空字符串。

另外，您编写的if语句在onclick事件处理程序之外。因此，该代码在准备好事件上执行。

$(document).ready(function() {
  $("#go").on('click', function() {
    $('#select1').val() ? $('.select1td').show() : $('.select1td').hide();
    $('#select2').val() ? $('.select2td').show() : $('.select2td').hide();
    $('#select3').val() ? $('.select3td').show() : $('.select3td').hide();
  
    /* This is an alternative notation if you prefer this.
    
    if ($('#select1').val()) {
      $('.select1td').show();
    } else {
      $('.select1td').hide();
    }

    if ($('#select2').val()) {
      $('.select2td').show();
    } else {
      $('.select2td').hide();
    }

    if ( $('#select3').val()) {
      $('.select3td').show();
    } else {
      $('.select3td').hide();
    }
    
    */
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option value=''>no value</option>
  <option value='something'>value</option>
</select>

<select id="select2">
  <option value=''>no value</option>
  <option value='something'>value</option>
</select>

<select id="select3">
  <option value=''>no value</option>
  <option value='something'>value</option>
</select>

<button id="go">Go</button>

<table>
  <tr>
    <td class="select1td">select1td</td>
    <td class="select2td">select2td</td>
    <td class="select3td">select3td</td>
  </tr>
</table>

请问您能否给我一个例子，展示如何使用来自数据库的表格数据完成所有这些操作？ - stcara
@stcara，您的意思有点不清楚。您能否编辑您的问题并详细描述您想要实现什么？ - Mark Baijens
1
在JQuery中，您可以使用element.toggle();。但是使用JavaScript也可以(element.style.display)。 我想我看到了您的问题，您写道： 
document.getElementByClass('select1td').style.display=none; //wrong
要获取具有特定类的元素，您必须按照以下方式进行： 
document.getElementsByClassName('select1td')[index].style.display=none;
当您选择一个类时，您选择的不仅仅是一个元素，而是一个元素数组，即使数组中只有1个元素。 这就是为什么您必须指定索引的原因。 请记住，在数组中，索引从0开始（要获取第一个元素，您必须选择索引为0的元素，例如）： document.getElementsByClassName('select1td')[0].style.display=none; 改进！ 对于这3个td元素，您可以只有一个类。 
<table>
<tr>   
<td class="selecttd"><?php echo $row["name"]; ?></td>
<td class="selecttd"><?php echo $row["course"]; ?></td>
<td class="selecttd"><?php echo $row["reg"]; ?></td>
</table>

然后您可以像这样选择每个选项：

document.getElementsByClassName('selecttd')[0.style.display=none;//for the first one
document.getElementsByClassName('selecttd')[0].style.display=none;//second
document.getElementsByClassName('selecttd')[0].style.display=none;//third

又一个改进！

你可以使用document.querySelector() // 通过这个方法，你可以选择所有类型的元素，例如按标签名称、类名、id等进行选择：

document.querySelector("td");//select the first td
document.querySelectorAll(".class")[2];//selects the third element from class
document.querySelector("#id");//selects an element by id

你的 JavaScript 代码可以是：

$(document).ready(function(){
      $("#go").click(function(){
 var select1=document.getElementById("select1").value;
  var select2=document.getElementById("select2").value;
   var select3=document.getElementById("select3").value;
   ;
      });

      if(select1==null){
document.querySelectorAll('selecttd')[0].style.display=none;
      }
      if(select2==null){
document.querySelectorAll('selecttd')[1].style.display=none;
      }
      }); 
  </script>

并且HTML：

<table>
<tr>   
<td class="selecttd"><?php echo $row["name"]; ?></td>
<td class="selecttd"><?php echo $row["course"]; ?></td>
<td class="selecttd"><?php echo $row["reg"]; ?></td>
</table>

JQuery example:

$(document).ready(function(){
      $("#go").click(function(){
 var select1=$(#select1").val;
  var select2=$(#select2").val;
   var select3=$(#select3").val;
   ;
      });

      if(select1==null){
$('.selecttd')[0].toggle();
      }
      if(select2==null){
$('.selecttd')[1].toggle();
      }
      });

我希望这对您有所帮助！祝您好运！

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，