Question

我正在尝试创建一个过滤器功能，根据最小值和最大值从表中删除某些分数。

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

我有一个按钮，它接受用户输入的最小值和最大值，并将其传递给以下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();
    }
  }
}

然而，它似乎没有起作用。我做错了什么？

Answer 1

Example (jsFiddle)

小提琴包括一些额外的功能，这些功能是为动态填充表而创建的;然而，这是小提琴的关键所在：

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

如果有的话，您的代码 $(table.rows[i].innerHTML).hide() 正在尝试隐藏属性，这可能会导致错误。您可能打算隐藏整行：

$( table.rows[i] ).hide();

使用Javascript过滤和隐藏特定的表行

1 个答案:

Example (jsFiddle)