HTML/jQuery 显示和隐藏表行
HTML/jQuery Show and Hide table rows
我有一个用作联系表单的表格，其内容将根据下拉菜单进行更改。
这是我的表：
<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，我无法弄清楚更改保管箱菜单下方行的文本。
<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>
如何显示/隐藏行
存在语法错误，因为您无法在此行的 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>我认为这就是您需要的，具体取决于下拉菜单显示相应元素的行，
$('#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 wii。
这是工作小提琴...
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个元素。
更改"文本"行
$("#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.相关文章：
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 数据表-隐藏/显示列
- $scope变量，ng隐藏/显示
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- JQuery隐藏/显示无法正常工作
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- 使用类而不是id在JavaScript中隐藏显示
- 我想隐藏/显示我的SVG元素，同时在anguarJS中使用它
- 隐藏/显示图像
- Javascript 中的表 - 隐藏/显示列
- 仅使用Javascript隐藏/显示元素，而不会弄乱DOM
- 隐藏/显示 js 代码不会在 IE8 或更低版本上运行
- Magento:根据所选国家/地区隐藏/显示输入字段
- 货到付款选择隐藏/显示付款方式
- "隐藏/显示”;元素和更改按钮背景图像
- Bootstrap Collapse.js切换菜单的隐藏/显示
- 如何隐藏/显示<面板>使用jquery
- 在php中隐藏/显示切换回声结果
- 如何使用jquery使2个按钮切换css，而只使用1个按钮.不显示隐藏/显示
- JQuery隐藏/显示不起作用
