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

how to display or not display the tables rows or table data using onchange in html

本文关键字：显示 html 数据 onchange 何显示      更新时间：2023-09-26

我有一个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任何工作没有任何问题。

这是一个使用jQuery的解决方案。它是相当灵活的，基于使用CSS类对元素进行分组，所以如果你添加更多的选项或更多的规则，你只需要把适当的类放在受影响的元素上，而不需要改变javascript代码。系统非常简单:在受影响的元素上，有一个"display-x"形式的类，其中"x"是选择中选项的值。如果选择了一个选项，那么表中具有该类的所有元素都将被设置为可见，其他所有元素都将被隐藏。

(注意一些元素，例如<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>

正是你的问题评论所说的。我将给您一个小示例，其中包含显示一行的选项。

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();
       }
    }
 }

对其余部分做同样的处理。应该工作。

相关文章：