Firefox won't show and hide my table properly. Only Shows header on button press not row
Question
Firefox won't show and hide my table properly. Only Shows header on button press not row.
Basically what I'm wanting is for when the user clicks the button, the column header with the id "HideMe" and the rows of the same id are shown. This works perfectly in Chrome but not in Firefox
<html>
<head>
<title>Show and Hide Javascript won't work in Firefox</title>
<style>
#HideMe {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.ShowPassword').click(function () {
$(HideMe).show();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>ID Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th id="HideMe">Password</th>
</tr>
<tr>
<td>2121</td>
<td>Mike</td>
<td>Daniel</td>
<td id="HideMe">Password</td>
</tr>
<button class="ShowPassword">Show Password</button>
</body>
2 answers
solution1
0 ACCPTED
This is in no way right
$(HideMe).show();
you may want to do something like:
$('#HideMe').show();
FIDDLE: http://jsfiddle.net/JS7tK/5/
I didn't notice at first but as bandi notes in his comment id should be unique. So try to do something like:
<html>
<head>
<title>Show and Hide Javascript won't work in Firefox</title>
<style>
.HideMe {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.ShowPassword').click(function () {
$('.HideMe').show();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>ID Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th class="HideMe">Password</th>
</tr>
<tr>
<td>2121</td>
<td>Mike</td>
<td>Daniel</td>
<td class="HideMe">Password</td>
</tr>
<button class="ShowPassword">Show Password</button>
</body>
<html>
solution2
0 2013-03-08 14:54:08
我不使用jQuery，但是通常来说，最好将一个span放在＆隐藏之内而不是隐藏该单元格，因为这样做会导致表格不平衡，因此某些浏览器不允许这样做并不奇怪它。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.