javascript - 为什么在滚动筛选表数据时 Html 表行滚动中断

Question

我有一个 html 表，其中包含搜索选项、向上+向下箭头键行滚动选项、突出显示的行克隆选项。现在，当我进行搜索时，数据会被过滤。当我尝试使用箭头键滚动数据时，数据将按行的 ID 编号顺序滚动。例如:如果过滤后的数据是这样的:

##-名称-amt

1 aaa 100

2ddd 111

5 ddd 000

这里如果我滚动数据然后第一行被突出显示，然后是第二行然后突出显示消失并且在我按向下箭头键 3 次之后第三行被突出显示。这意味着，在突出显示第二行后，它会转到序列号。 3 ，然后到 4 然后它出现并突出显示序列号 5。

为什么会这样？？有什么帮助吗？

var $rows = $('#myTable tr');
$('#search').keyup(function() {

  var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
    reg = RegExp(val, 'i'),
    text;

  $rows.show().filter(function() {
    text = $(this).text().replace(/\s+/g, ' ');
    return !reg.test(text);
  }).hide();
});

// highlight first row default
$("#myTable tbody tr:first-child").addClass("highlight");

document.onkeydown = moveAndAdd;

function moveAndAdd(e) {
  e = e || window.event;
  if (e.keyCode == "38") {
    // up arrow
    activeRow = $("tr.highlight"); /* get highlighted row */
    activeRow.focus();
    prevRow = activeRow.prev('tr'); /*very previous siblings*/
    if (prevRow.length > 0) {
      activeRow.removeClass("highlight"); /*remove highlight from active class */
      prevRow.addClass("highlight"); /* make very prev row highlighted*/
    }
  } else if (e.keyCode == "40") {
    // down arrow
    activeRow = $("tr.highlight"); /* get highlighted row */
    activeRow.focus();
    nextRow = activeRow.next('tr'); /*very previous siblings*/
    if (nextRow.length > 0) {
      activeRow.removeClass("highlight");
      nextRow.addClass("highlight");
    }
  } else if (e.which == 13) { //|| e.which == 32
    // Enter or Spacebar - edit cell
    e.preventDefault();
    cloneRow = $(".highlight").clone(true); /*clone highlighted row*/
    $("#cloneTable").append(cloneRow.removeClass("highlight")); /*append cloned row but remove class */
  }
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

table {
  cursor: pointer;
  border: 1px dashed #333;
  padding: 10px;
  margin-top: 20px;
}

.highlight {
  background-color: rgb(100, 200, 200);
}

th {
  font-weight: 100;
  background-color: rgb(200, 100, 100);
  color: white;
  text-align: center;
}

th,
td {
  padding-left: 10px;
  padding-right: 5px;
}

td {
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left;">
  <input type="search" id="search" placeholder="Type to search" tabindex="1" autofocus>
  <table id="myTable" tabindex="2">
    <caption>Table Products</caption>
    <thead>
      <tr>
        <th>##</th>
        <th>name</th>
        <th>unit</th>
        <th>rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>intel</td>
        <td>a1</td>
        <td>100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>intel core</td>
        <td>a1</td>
        <td>200</td>
      </tr>
      <tr>
        <td>3</td>
        <td>gigabyte</td>
        <td>a1</td>
        <td>300</td>
      </tr>
      <tr>
        <td>4</td>
        <td>asus</td>
        <td>a1</td>
        <td>400</td>
      </tr>
      <tr>
        <td>5</td>
        <td>asrock</td>
        <td>a1</td>
        <td>500</td>
      </tr>
      <tr>
        <td>6</td>
        <td>intel core i3</td>
        <td>a1</td>
        <td>600</td>
      </tr>
      <tr>
        <td>7</td>
        <td>intel core i7</td>
        <td>a1</td>
        <td>700</td>
      </tr>
      <tr>
        <td>7</td>
        <td>intel core 2 duo</td>
        <td>a1</td>
        <td>700</td>
      </tr>
      <tr>
        <td>7</td>
        <td>intel h110</td>
        <td>a1</td>
        <td>700</td>
      </tr>
      <tr>
        <td>7</td>
        <td>cca</td>
        <td>a1</td>
        <td>700</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="4">Scroll list with Up &amp; Down arrow keys.<br> Press Enter to add the selected Row</td>
      </tr>
    </tfoot>
  </table>
</div>

<div style="float:right;">
  <table id="cloneTable">
    <caption>Table Products Clone</caption>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>unit</th>
      <th>rate</th>
    </tr>
  </table>
</div>

Answer 1

发生这种情况是因为您在所有行之间导航，其中一些行在过滤后被隐藏了。您必须遍历它们，直到找到可见的行。我使用 do - while 循环做了一个示例，该循环简单地遍历行，直到找到下一个或上一个可见行或到达末尾。

var $rows = $('#myTable tr');
$('#search').keyup(function() {

  var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
    reg = RegExp(val, 'i'),
    text;

  $rows.show().filter(function() {
    text = $(this).text().replace(/\s+/g, ' ');
    return !reg.test(text);
  }).hide();
});

// highlight first row default
$("#myTable tbody tr:first-child").addClass("highlight");

document.onkeydown = moveAndAdd;

function moveAndAdd(e) {
  e = e || window.event;
  if (e.keyCode == "38") {
    // up arrow
    activeRow = $("tr.highlight"); /* get highlighted row */
    activeRow.focus();
    
    // Find previous visible row
    var prevRow = activeRow;
    do {
      prevRow = prevRow.prev('tr'); /* very previous sibling */
    } while (prevRow.length !== 0 && prevRow.is(":hidden"));
    
    if (prevRow.length > 0) {
      activeRow.removeClass("highlight"); /*remove highlight from active class */
      prevRow.addClass("highlight"); /* make very prev row highlighted*/
    }
  } else if (e.keyCode == "40") {
    // down arrow
    activeRow = $("tr.highlight"); /* get highlighted row */
    activeRow.focus();
    
    // Find next visible row
    var nextRow = activeRow;
    do {
      nextRow = nextRow.next('tr'); /* very next sibling */
    } while (nextRow.length !== 0 && nextRow.is(":hidden"));
    
    if (nextRow.length > 0) {
      activeRow.removeClass("highlight");
      nextRow.addClass("highlight");
    }
  } else if (e.which == 13) { //|| e.which == 32
    // Enter or Spacebar - edit cell
    e.preventDefault();
    cloneRow = $(".highlight").clone(true); /*clone highlighted row*/
    $("#cloneTable").append(cloneRow.removeClass("highlight")); /*append cloned row but remove class */
  }
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

table {
  cursor: pointer;
  border: 1px dashed #333;
  padding: 10px;
  margin-top: 20px;
}

.highlight {
  background-color: rgb(100, 200, 200);
}

th {
  font-weight: 100;
  background-color: rgb(200, 100, 100);
  color: white;
  text-align: center;
}

th,
td {
  padding-left: 10px;
  padding-right: 5px;
}

td {
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left;">
  <input type="search" id="search" placeholder="Type to search" tabindex="1" autofocus>
  <table id="myTable" tabindex="2">
    <caption>Table Products</caption>
    <thead>
      <tr>
        <th>##</th>
        <th>name</th>
        <th>unit</th>
        <th>rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>intel</td>
        <td>a1</td>
        <td>100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>intel core</td>
        <td>a1</td>
        <td>200</td>
      </tr>
      <tr>
        <td>3</td>
        <td>gigabyte</td>
        <td>a1</td>
        <td>300</td>
      </tr>
      <tr>
        <td>4</td>
        <td>asus</td>
        <td>a1</td>
        <td>400</td>
      </tr>
      <tr>
        <td>5</td>
        <td>asrock</td>
        <td>a1</td>
        <td>500</td>
      </tr>
      <tr>
        <td>6</td>
        <td>intel core i3</td>
        <td>a1</td>
        <td>600</td>
      </tr>
      <tr>
        <td>7</td>
        <td>intel core i7</td>
        <td>a1</td>
        <td>700</td>
      </tr>
      <tr>
        <td>7</td>
        <td>intel core 2 duo</td>
        <td>a1</td>
        <td>700</td>
      </tr>
      <tr>
        <td>7</td>
        <td>intel h110</td>
        <td>a1</td>
        <td>700</td>
      </tr>
      <tr>
        <td>7</td>
        <td>cca</td>
        <td>a1</td>
        <td>700</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="4">Scroll list with Up &amp; Down arrow keys.<br> Press Enter to add the selected Row</td>
      </tr>
    </tfoot>
  </table>
</div>

<div style="float:right;">
  <table id="cloneTable">
    <caption>Table Products Clone</caption>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>unit</th>
      <th>rate</th>
    </tr>
  </table>
</div>