时间戳

首页 > 解决方案 > 显示表格行的函数

javascript - 显示表格行的函数

问题描述

我正在尝试使用下拉列表使函数显示或隐藏表行。从下拉列表中选择元素时，函数没有响应。手动在 CSS 中隐藏/显示时，类可以正常工作。if 语句没有 else 来简化代码。

<select id="vendorselect" onselect="tableshow()">
  <option>Select vendor:</option>
  <option id="Capintec">Capintec</option>
  <option id="Exradin">Exradin</option>

</select>

<table class="ionchambers">
  <tr class="CapintecTbl">
    <td>Capintec PR-05P mini</td>    
    <td>1.046</td><td>1.045</td><td> 1.044</td>
  </tr>

  <tr class="ExradinTbl">
    <td>Exradin P425</td>  
    <td>1.046</td><td>1.045</td><td>1.044</td>
  </tr>
</table>

function tableshow() {
  var table = document.getElementById("vendorselect").value;
  if (table == "Capintec") {                         
    document.getElementsByClassName("CapintecTbl").style.display='inline-block';
    document.getElementsByClassName("ExradinTbl").style.display='none';
  }
}

标签： javascripthtml

解决方案

更改onselect为onchange.

<select id="vendorselect" onchange="tableshow()">
  <option>Select vendor:</option>
  <option id="Capintec">Capintec</option>
  <option id="Exradin">Exradin</option>
</select>

此外，JavaScript 选择器不起作用。
尝试为这些更改它们：

document.querySelector(".CapintecTbl").style.display='inline-block';
document.querySelector(".ExradinTbl").style.display='none';

推荐阅读