HTML / jQuery显示和隐藏表行

时间：2016-02-19 12:11:13

标签： javascript jquery html

我有一个表作为联系表单，其内容将根据下拉菜单进行更改。

这是我的表：

    <table border="1">
        <tr>
            <th colspan="2">Contact Details</th>
        </tr>
        <tr>
            <td>Company Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Email:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Mobile Number:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>
                Contact Type:
            </td>
            <td>
                <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements -->
                    <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
                    <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row -->
                    <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row -->
                    <option value="Complains">Complains</option> <!-- Shows Option 3 Row -->
                    <option value="Requests">New Requests</option> <!-- Shows Option 4 Row -->
            </td>
        </tr>
        <tr> <!-- Header from contactSelect-->
            <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
        </tr>
        <tr> <!-- Option 1 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 2 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 3 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 4 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- This is a temp row to be deleted -->
                <td>Selected Value:</td>
                <td><input type="text" name="test" id="test" /></td>
        </tr>
    </table>

对于jQuery，我无法想象更改dropbox菜单下方行的文本。

    <script>
        function changeVal() {
            document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
            $('#myHeader').text(document.getElementById('contactSelect').value);
            alert(document.getElementById('myHeader').text);
            alert(document.getElementById('contactSelect').value);
        }
    </script>

如何显示/隐藏行

4 个答案:

答案 0 :(得分：1)

由于您无法在此行的dom节点上应用jQuery方法，因此存在语法错误：

document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
 //------------this cause in error---^^^^

您可以更改标记，例如将选择值作为类/ ID添加到相应的trs：

function changeVal() {

  if (this.value != 'default') {
    $(this).closest('tr').nextAll('.row').hide();
    $('.' + this.value).show();
  } else {
    $('.row').show();
  }
  $('#myHeader').html(this.value).toggle(this.value != 'default'); // use here to hidenshow
}

  $('#contactSelect').change(changeVal).trigger('change'); // <---and you need to trigger it on page load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th colspan="2">Contact Details</th>
  </tr>
  <tr>
    <td>Company Name:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Name:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Email:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Mobile Number:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      Contact Type:
    </td>
    <td>
      <select name="contactSelect" id="contactSelect">
        <!-- Function showHide Show work on table elements -->
        <option value="default" selected>Pelease select ...</option>
        <!-- Hide all 4 rows below -->
        <option value="General" id="cat2">General Inquiry</option>
        <!-- Shows Option 1 Row -->
        <option value="Feedback" id="cat3">Feedback</option>
        <!-- Shows Option 2 Row -->
        <option value="Complains">Complains</option>
        <!-- Shows Option 3 Row -->
        <option value="Requests">New Requests</option>
        <!-- Shows Option 4 Row -->
      </select>
    </td>
  </tr>
  <tr>
    <!-- Header from contactSelect-->
    <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
  </tr>
  <tr>
    <!-- Option 1 -->
    <td></td>
    <tr class='row General'>
      <!-- Option 1 -->
      <td>General</td>
      <td>General</td>
    </tr>
    <tr class='row Feedback'>
      <!-- Option 2 -->
      <td>Feedback</td>
      <td>Feedback</td>
    </tr>
    <tr class='row Complains'>
      <!-- Option 3 -->
      <td>Complains</td>
      <td>Complains</td>
    </tr>
    <tr class='row Requests'>
      <!-- Option 4 -->
      <td>Requests</td>
      <td>Requests</td>
    </tr>
    <td>Selected Value:</td>
    <td>
      <input type="text" name="test" id="test" />
    </td>
  </tr>
</table>

答案 1 :(得分：1)

我认为这是你需要的，取决于下拉列表显示各个元素的行，

$('#contactSelect').change(function() {
        $('.test').hide()
        document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
        var value = document.getElementById('contactSelect').value
        $('#myHeader').text(document.getElementById('contactSelect').value);
        alert(document.getElementById('myHeader').text);
        alert(document.getElementById('contactSelect').value);
        $('#'+value).toggle()
   })
<style>
.test { display: none;}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<table border="1">
        <tr>
            <th colspan="2">Contact Details</th>
        </tr>
        <tr>
            <td>Company Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Email:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Mobile Number:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>
                Contact Type:
            </td>
            <td>
                <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements -->
                    <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
                    <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row -->
                    <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row -->
                    <option value="Complains">Complains</option> <!-- Shows Option 3 Row -->
                    <option value="Requests">New Requests</option> <!-- Shows Option 4 Row -->
            </td>
        </tr>
        <tr> <!-- Header from contactSelect-->
            <th colspan="2" id="myHeader" name="myHeader" value="text"></th>
        </tr>
        <tr class="test" id="General"> <!-- Option 1 -->
            <td>General Inquiry</td>
            <td>General Inquiry</td>
        </tr>
        <tr class="test" id="Feedback"> <!-- Option 2 -->
            <td>Feedback</td>
            <td>Feedback</td>
        </tr>
        <tr class="test" id="Complains"> <!-- Option 3 -->
            <td>Complains</td>
            <td>Complains</td>
        </tr>
        <tr class="test" id="Requests"> <!-- Option 4 -->
            <td>New Requests</td>
            <td>New Requests</td>
        </tr>
        <tr> <!-- This is a temp row to be deleted -->
                <td>Selected Value:</td>
                <td><input type="text" name="test" id="test" /></td>
        </tr>
    </table>

现在，一旦从下拉列表中选择一个值，就会显示其各自的div。

Here is the working fiddle...

答案 2 :(得分：0)

＆＃13;
＆＃13; 
 function changeVal() {
  $('#contactSelect').change(function(){
    $('tr:eq(0)').hide(); //.show() to show again
    });
 }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th colspan="2">Contact Details</th>
  </tr>
  <tr>
    <td>Company Name:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Name:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Email:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Mobile Number:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      Contact Type:
    </td>
    <td>
      <select name="contactSelect" id="contactSelect" onchange="changeVal();">
        <!-- Function showHide Show work on table elements -->
        <option value="default" selected>Pelease select ...</option>
        <!-- Hide all 4 rows below -->
        <option value="General" id="cat2">General Inquiry</option>
        <!-- Shows Option 1 Row -->
        <option value="Feedback" id="cat3">Feedback</option>
        <!-- Shows Option 2 Row -->
        <option value="Complains">Complains</option>
        <!-- Shows Option 3 Row -->
        <option value="Requests">New Requests</option>
        <!-- Shows Option 4 Row -->
    </td>
  </tr>
  <tr>
    <!-- Header from contactSelect-->
    <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
  </tr>
  <tr>
    <!-- Option 1 -->
    <td></td>
    <td></td>
  </tr>
  <tr>
    <!-- Option 2 -->
    <td></td>
    <td></td>
  </tr>
  <tr>
    <!-- Option 3 -->
    <td></td>
    <td></td>
  </tr>
  <tr>
    <!-- Option 4 -->
    <td></td>
    <td></td>
  </tr>
  <tr>
    <!-- This is a temp row to be deleted -->
    <td>Selected Value:</td>
    <td>
      <input type="text" name="test" id="test" />
    </td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

您可以使用toggle来显示/隐藏元素。 show（）和hide（）只执行一次。你应该像我一样用id或name来代替第n个元素。

答案 3 :(得分：0)

更改“文字”行

$("#contactSelect").on('change', function(){
  $("#myHeader").text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table border="1">
        <tr>
            <th colspan="2">Contact Details</th>
        </tr>
        <tr>
            <td>Company Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Email:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Mobile Number:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>
                Contact Type:
            </td>
            <td>
                <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements -->
                    <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
                    <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row -->
                    <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row -->
                    <option value="Complains">Complains</option> <!-- Shows Option 3 Row -->
                    <option value="Requests">New Requests</option> <!-- Shows Option 4 Row -->
                  </select>
            </td>
        </tr>
        <tr> <!-- Header from contactSelect-->
            <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
        </tr>
        <tr> <!-- Option 1 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 2 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 3 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 4 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- This is a temp row to be deleted -->
                <td>Selected Value:</td>
                <td><input type="text" name="test" id="test" /></td>
        </tr>
    </table>
As for the jQuery, I can't figure it out expect for change the text of the row below the dropbox menu.

相关问题
最新问题