HTML / jQuery顯示和隱藏表格行

Question

我有一個用作聯系表單的表格，其內容將根據下拉菜單進行更改。

這是我的桌子：

    <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>

如何顯示/隱藏行

Answer 1

由於無法在此行的dom節點上應用jQuery方法，因此存在語法錯誤：

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

您可以像對各個trs添加選擇值作為類/ ID一樣，稍微改變標記：

 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> 

Answer 2

我認為這就是您所需要的，具體取決於下拉菜單中顯示相應元素的行，

 $('#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。

這是工作中的小提琴...

Answer 3

  function changeVal() { $('#contactSelect').change(function(){ $('tr:eq(0)').hide(); //.show() to show again }); } 

 <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> 

您可以使用切換顯示/隱藏元素。 show（）和hide（）僅執行一次。 您應該選擇一個ID或名稱，而不是像我一樣選擇第n個元素。

Answer 4

更改“文本”行

 $("#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.