如何在html中使用onchange显示或不显示表行或表数据

Question

我有一个HTML代码，可以选择不同的选项。 根据选择，表中的行或数据会发生变化。 这是我的HTML代码：

Select here <select name='set' id="set" class="selectpicker" onchange='displayFields(this.value);'>
        <option disabled selected>-- select an option --</option>
        <option>Selection 1</option>
        <option>Selection 2</option>
        <option>Selection 3</option>
        <option>Selection 4</option>
    </select> 
<table class="root-table" id="table-root">
    <br/>
     <tr>
        <td><p>foo Name:</p></td>
        <td><p>fooo Name:</p></td>
        <td><input type="text" id="foo" name="foo" value=""/></td>
    </tr>


    <tr>
        <td><p>bar:</p></td>
        <td><p>bar2:</p></td>
        <td><p>bar3:</p></td>
        <td><input type="text" id="bar" name="bar" /></td>
    </tr>
        <tr>
        <td><p>foo1:</p></td>
        <td><input type="text" id="foo1" name="foo1" value=""/></td>
    </tr>
    <tr>
        <td id="user"><p>UserName   :</p></td>
        <td><input type="text" id="uid" name="uid" style='display:none;'/></td>
    </tr>

    <tr>
        <td id="pass"><p>Password   :</p></td>
        <td><input type="password" id="pwd" name="pwd" /></td>
    </tr>
    </table>

选择不同选项时，表数据会发生变化。 请查看所需的输出：

When Selection 1 is selected
row 1 : foo name : and text field
row 2 : bar : and text field
row 3 : foo1: and text field
row 4 : not displayed
row 5 : Password : and password field

When Selection 2 is selected
row 1 : fooo Name : and text field
row 2 : bar2 : and text field
row 3 : not displayed
row 4 : username and text field
row 5 : Password : and password field

When Selection 3 is selected
row 1 : foo name : and text field
row 2 : bar3 : and text field
row 3 : foo1: and text field
row 4 : username and text field
row 5 : Password : and password field

When Selection 4 is selected
row 1 : foo name : and text field
row 2 : not displayed
row 3 : not displayed
row 4 : username and text field
row 5 : Password : and password field

在我的JavaScript代码中：

<script type="text/javascript">
        function displayFields(setType){

            setValue = setType;
            ...
            ...
            ...
</script>

即使已使用该表的css，也不应在页面中显示未显示的行。

我尝试使用display=block和document.getElementById("").style.visibility = 'visible' or 'none'; 但这有太多漏洞，我发现它不可靠。 你能帮我找到解决这个问题的方法。

注意：解决方案是javascript或JQuery没有任何问题。

Answer 1

究竟是什么评论你的问题。 我将给你一个小例子，其中有一个显示一行的选项。

Select here 
<select name='set' id="set" class="selectpicker"    onchange='displayFields(this.value);'>
       <option disabled selected>-- select an option --</option>
       <option value="1">Selection 1</option>
       <option value="2">Selection 2</option>
       <option value="3">Selection 3</option>
       <option value="4">Selection 4</option>
</select> 
.
.
.
<tr id="row1">
    <td><p>foo Name:</p></td>
    <td><p>fooo Name:</p></td>
    <td><input type="text" id="foo" name="foo" value=""/></td>
</tr>
.
.
.
<script>
 $(document).ready(function(){

    $('#row1').hide();

    $('#set').change(function(){
       if(("#set").val()==1){
          $('#row1').show();
       }
    }

 }

其余的都做同样的事情。 应该管用。

Answer 2

这是使用jQuery的解决方案。 它非常灵活，基于使用CSS类对元素进行分组，因此如果您添加更多选项或更多规则，您只需要在受影响的元素上放置适当的类 - 而无需更改javascript代码。 系统非常简单：在受影响的元素上，有一个“display-x”形式的类，其中“x”是select中选项的值。 如果选择了某个选项，则表中包含该类的所有元素都将设置为可见，其他所有元素都将被隐藏。

（注意一些元素，例如<tr> s有类，因为它们包含需要显示的元素，并且tr可能已被先前的选择隐藏）。

Select here <select name='set' id="set" class="selectpicker">
    <option value="" selected>-- select an option --</option>
    <option value="1">Selection 1</option>
    <option value="2">Selection 2</option>
    <option value="3">Selection 3</option>
    <option value="4">Selection 4</option>
</select>
<br/>
<table class="root-table" id="table-root">
<tbody>
<tr class="display-1 display-2 display-3 display-4">
    <td class="display-1 display-3 display-4"><p>foo Name:</p></td>
    <td class="display-2"><p>fooo Name:</p></td>
    <td class="display-1 display-2 display-3 display-4" ><input type="text" id="foo" name="foo" value=""/></td>
</tr>
<tr class="display-1 display-2 display-3">
    <td class="display-1"><p>bar:</p></td>
    <td class="display-2"><p>bar2:</p></td>
    <td class="display-3"><p>bar3:</p></td>
    <td class="display-1 display-2 display-3"><input type="text" id="bar" name="bar" /></td>
</tr>
<tr class="display-1 display-3">
    <td class="display-1 display-3"><p>foo1:</p></td>
    <td class="display-1 display-3"><input type="text" id="foo1" name="foo1" value=""/></td>
</tr>
<tr class="display display-2 display-3 display-4">
    <td id="user" class="display display-2 display-3 display-4"><p>UserName   :</p></td>
    <td class="display display-2 display-3 display-4"><input type="text" id="uid" name="uid"/></td>
</tr>

<tr class="display-1 display-2 display-3 display-4">
    <td id="pass" class="display-1 display-2 display-3 display-4"><p>Password   :</p></td>
    <td class="display-1 display-2 display-3 display-4"><input type="password" id="pwd" name="pwd"/></td>
</tr>
</tbody>
</table>

<script language="javascript">
$(function() {
   $("#table-root tbody").find("tr, td").hide(); //hide all row and cell elements to begin with

  $("#set").change(function() {
    $("#table-root tbody").find("tr, td").hide(); //hide all row and cell elements
    $("#table-root .display-" + $(this).val()).show(); //show only those elements which match the current selection
  });   
});
</script>