[英]Using Javascript to filter and hide specific table rows
I'm trying to create a filter feature that removes certain scores from a table based on min and max value. 我正在尝试创建一个过滤器功能,该功能基于最小和最大值从表中删除某些分数。
My HTML: 我的HTML:
<table id="historyTable">
<tr>
<th>Game #</th>
<th>Date</th>
<th>Location</th>
<th>Score</th>
<th>Strikes</th>
<th>Spares</th>
</tr>
<tr>
<td>299</td>
<td>29 Feb 2016</td>
<td>Hello World Bowling Alley</td>
<td>202</td>
<td>6</td>
<td>1</td>
</tr>
<tr> ...same thing as above repeated a few times </tr>
</table>
I've got a button that takes the user's input min and max values and passes it to the following JS function onclick: 我有一个按钮,它接受用户输入的最小值和最大值,并将其传递给以下JS函数onclick:
function updateFilter(min, max) {
var table = document.getElementById('historyTable');
var rowCount = table.rows.length-1; // since I don't want to include the header row
for(var i = 1; i<=rowCount; i++) {
var scoreCheck = table.rows[i].cells[3].innerHTML;
if(scoreCheck < min || scoreCheck > max) {
$(table.rows[i].innerHTML).hide();
}
}
}
However, it doesn't seem to be working. 但是,它似乎不起作用。 What am I doing wrong?
我究竟做错了什么?
The fiddle includes some extra functions which were created to dynamically populate the table; 小提琴包含一些额外的功能,这些功能是为了动态填充表格而创建的。 however, this is the crux of the fiddle:
但是,这是小提琴的症结所在:
window.updateFilter = function(min, max) {
var table = document.getElementById('historyTable'),
rows = table.tBodies[0].rows,
fields = { score: 3 };
// loop over rows
for (var i = 0, n = rows.length; i < n; i++) {
// get the numerical score; notice the unary-plus (+) for integer conversion
var scoreCheck = +rows[i].cells[fields.score].innerText;
if (scoreCheck < min || scoreCheck > max) {
hidden[i] = rows[i]; // cache hidden row
rows[i].style.display = 'none'; // hide the entire row
}
// if row has a good value, make sure its shown (unhide if hidden)
else {
// make sure another method didn't already unhide it
if (hidden.hasOwnProperty(i)) {
hidden['' + i].style.display = ''; // set the styling so its visible
delete hidden[i]; // no longer need the value in cache
}
}
}
return false;
}
If anything, your code $(table.rows[i].innerHTML).hide()
is attempting to hide a property, which probably results in an error. 如果有的话,您的代码
$(table.rows[i].innerHTML).hide()
试图隐藏属性,这可能会导致错误。 You probably intended to hide the entire row: 您可能打算隐藏整行:
$( table.rows[i] ).hide();
These are the issues to correct: 这些是要纠正的问题:
Don't use innerHTML
in this selector as it will create a new element, only in memory, and act on that: 不要在此选择器中使用
innerHTML
,因为它将在内存中创建一个新元素,并对其进行操作:
$(table.rows[i].innerHTML)
Instead you should select the row element without innerHTML
. 相反,您应该选择不包含
innerHTML
的row元素。
Without any code to show rows again, the effect of a second filter will not be as intended, because the previously hidden rows will not appear again if they fit the second filter. 如果没有任何代码再次显示行,则第二个过滤器的效果将不会达到预期的效果,因为如果先前隐藏的行适合第二个过滤器,则它们不会再次出现。 So you should better use
toggle
instead of hide
and pass the boolean setting as argument. 因此,您最好使用
toggle
而不是hide
并将布尔设置作为参数传递。
When you read the cell content, don't use innerHTML
, but the plain text content. 阅读单元格内容时,请勿使用
innerHTML
,而应使用纯文本内容。 Then also convert it to number so numerical comparisons work. 然后还将其转换为数字,以便进行数值比较。
As you use jQuery, you could shorten your code quite a bit. 使用jQuery时,可以大大缩短代码。
You could use this code: 您可以使用以下代码:
function updateFilter(min, max) { // As you use jQuery, use it to its ful potential: $('#historyTable > tbody > tr > td:nth-child(4)').each(function() { // Don't retrieve HTML but text; convert to number with `+` var scoreCheck = +$(this).text(); // Toggle instead of hide, so it works both ways: // Don't select providing HTML, but use a TR selector. $(this).closest('tr').toggle(min <= scoreCheck && scoreCheck <= max); }); } $('#filter').click(function () { var min = +$('#min').val(); // invalid input will use 0 as minimum // Replace invalid max input with very high value, so everything will be shown var max = +$('#max').val() || 1e20; updateFilter(min, max); });
th, td { border-bottom: 1px solid #ddd;} tr:hover {background-color: #f5f5f5} table {font-size: 11px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="historyTable"> <tr> <th>Game #</th> <th>Date</th> <th>Location</th> <th>Score</th> <th>Strikes</th> <th>Spares</th> </tr> <tr> <td>299</td> <td>29 Feb 2016</td> <td>Hello World Bowling Alley</td> <td>202</td> <td>6</td> <td>1</td> </tr> <tr> <td>298</td> <td>13 March 2016</td> <td>Kuwait Open</td> <td>158</td> <td>5</td> <td>2</td> </tr> <tr> <td>297</td> <td>13 Oct 2015</td> <td>11th Columbia 300 Vienna Open</td> <td>213</td> <td>7</td> <td>1</td> </tr> <tr> <td>296</td> <td>20 Mar 2016</td> <td>Brunswick Euro Challenge</td> <td>259</td> <td>3</td> <td>2</td> </tr> </table> Min:<input id="min" size="6" value="180"> Max:<input id="max" size="6" value="210"> <button id="filter">Apply filter</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.