使用 jquery 在第二个过滤器期间插入白线(Chrome Bug)
我有一个过滤器,可以隐藏未通过测试的表元素(时间少于 x 小时)。第一次一切正常。我选择了时间。未通过测试的元素将被隐藏。我重新加载以显示全部。我再次尝试过滤。这次,当所有其他行都隐藏时,在表标题和内容之间插入了一个空行。每次我重新运行过滤器时,都会插入另一行。
这是代码:
Html:
<div id="timeSelect">
<select id="FilterTimeList" name="FilterTimeList"><option value="">-- select Time --
</option>
</select>
</div>
<a id="filterLink" href="#" onclick="timeFilter(this);">Filter</a>
<table width="100%">
<tr>
<td>Log Id</td>
<td>Message</td>
<td>SourceStackTrace</td>
<td>awData</td>
<td>LogDate</td>
</tr>
<tr class="list">
<td class="myTitle">1</td>
<td>this is my message</td>
<td></td><td></td>
<td class="exceptionDate">5/4/2011 5:41:00 PM</td>
<td></td>
</tr>
<tr class="list">
<td class="myTitle">2</td>
<td>this is my message 2</td>
<td></td><td></td>
<td class="exceptionDate">4/27/2011 5:41:24 PM</td>
<td>
</td>
</tr>
<tr class="list">
<td class="myTitle">12</td>
<td>this is my message 12</td>
<td></td><td></td>
<td class="exceptionDate">5/16/2011 12:06:38 PM</td>
<td></td>
</tr>
</table>
Javascript:
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"/>
<script type="text/javascript">
var myOptions =
{
0: 'Show All',
1: 'Last 12 hours',
2: 'Last 24 hours'
};
$.each(myOptions, function (val, text) {
$('<option />').val(val).text(text).appendTo('#timeSelect select');
});
function timeFilter(a) {
$('.test').hide();
var chosenTime = $('#timeSelect select').val();
var timeCompare;
switch (chosenTime) {
case '1':
timeCompare = 12;
break;
case '2':
timeCompare = 24;
break;
}
var now = new Date();
var nowHours = now.setHours(now.getHours() - timeCompare);
var newDate = new Date(nowHours);
if (chosenTime > 0) {
var myDateClass = $('.exceptionDate')
var i = 0
$(myDateClass).each(function () {
var myDateClassVal = $(this).text();
var myDate = new Date(myDateClassVal);
if (myDate < newDate) {
$('tr:eq(' + i + ')').slideUp();
}
i++;
});
}
else {
$('.exceptionDate').parent().slideDown();
}
}
</script>
I have a filter that hides elements of a table that don't pass a test (time less than x hours). Everything works fine the first time. I chose time. Elements that don't pass test are hidden. I reload to show all. I try to filter again. This time when all other rows are hidden there is a blank line that is inserted between my table headers and the contents. Each time I rerun the filter another line gets inserted.
Here is code:
Html:
<div id="timeSelect">
<select id="FilterTimeList" name="FilterTimeList"><option value="">-- select Time --
</option>
</select>
</div>
<a id="filterLink" href="#" onclick="timeFilter(this);">Filter</a>
<table width="100%">
<tr>
<td>Log Id</td>
<td>Message</td>
<td>SourceStackTrace</td>
<td>awData</td>
<td>LogDate</td>
</tr>
<tr class="list">
<td class="myTitle">1</td>
<td>this is my message</td>
<td></td><td></td>
<td class="exceptionDate">5/4/2011 5:41:00 PM</td>
<td></td>
</tr>
<tr class="list">
<td class="myTitle">2</td>
<td>this is my message 2</td>
<td></td><td></td>
<td class="exceptionDate">4/27/2011 5:41:24 PM</td>
<td>
</td>
</tr>
<tr class="list">
<td class="myTitle">12</td>
<td>this is my message 12</td>
<td></td><td></td>
<td class="exceptionDate">5/16/2011 12:06:38 PM</td>
<td></td>
</tr>
</table>
Javascript:
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"/>
<script type="text/javascript">
var myOptions =
{
0: 'Show All',
1: 'Last 12 hours',
2: 'Last 24 hours'
};
$.each(myOptions, function (val, text) {
$('<option />').val(val).text(text).appendTo('#timeSelect select');
});
function timeFilter(a) {
$('.test').hide();
var chosenTime = $('#timeSelect select').val();
var timeCompare;
switch (chosenTime) {
case '1':
timeCompare = 12;
break;
case '2':
timeCompare = 24;
break;
}
var now = new Date();
var nowHours = now.setHours(now.getHours() - timeCompare);
var newDate = new Date(nowHours);
if (chosenTime > 0) {
var myDateClass = $('.exceptionDate')
var i = 0
$(myDateClass).each(function () {
var myDateClassVal = $(this).text();
var myDate = new Date(myDateClassVal);
if (myDate < newDate) {
$('tr:eq(' + i + ')').slideUp();
}
i++;
});
}
else {
$('.exceptionDate').parent().slideDown();
}
}
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我认为您的 JavaScript 中可能缺少一些代码,因为您有一个额外的 '});'在您的选项代码之后。
但不确定你的额外线路来自哪里。我让它在 jsFiddle 1.5.2 中工作,所以这可能是 jQuery 中纠正的错误...
http:// /jsfiddle.net/QhkGk/
I think you may be missing some code in your javascript, as you've got an extra '});' after your options code.
Not sure where your extra line is coming from, though. I got it working in jsFiddle with 1.5.2, so it might be a bug that was corrected in jQuery...
http://jsfiddle.net/QhkGk/